Как изменить стиль input type text

В этой статье рассмотрим различные варианты стилизации текстовых полей HTML-форм. Сначала создадим базовый вариант оформления input, а затем множество других, дополняя каждый из них небольшим количеством CSS.

Введение

Веб-формы являются неотъемлемой частью многих веб-сайтов. Они позволяют пользователю ввести те или иные данные, которые затем отправляются на сервер или обрабатываются на стороне клиента, например, для изменения интерфейса.

Веб-формы также часто называют HTML-формами. Их проектирование осуществляется с помощью элементов управления форм (текстовых полей, выпадающих списков, кнопок, чекбоксов и т.д.) и некоторых дополнительных элементов, которые используются для придание форме определённой структуры.

Стилизация формы выполняется через CSS. В этом руководстве остановимся и подробно рассмотрим различные варианты оформления её текстовых полей.

Исходные коды примеров расположены на GitHub в папке text-field проекта «ui-components».

Нормализация стилей

1. Настройка box-sizing.

Обычно хорошей практикой считается для всех элементов включая псевдоэлементы установить box-sizing: border-box:

*, *::before, *::after {
  box-sizing: border-box;
}

В этом случае браузер при рассчитывании ширины и высоты элементов будет включать в них поля (padding) и границы (border). Как правило, это сильно упрощает работу с размерами элементов, и избавляет нас от множества проблем при размещении контента.

2. Нормализация стилей <input>.

Для того чтобы <input> в разных браузерах отображался как можно более одинаково необходимо добавить следующее:

/* 1 – Изменим стили шрифтов */
/* 2 – Удалим margin в Firefox и Safari */
input[type="text"] {
  font-family: inherit; /* 1 */
  font-size: inherit; /* 1 */
  line-height: inherit; /* 1 */
  margin: 0; /* 2 */
}

Базовый вариант оформления input

Для удобного добавления к элементам стилей создадим следующую HTML-разметку:

<div class="text-field">
  <label class="text-field__label" for="login">Логин</label>
  <input class="text-field__input" type="text" name="login" id="login" placeholder="Login" value="itchief">
</div>

Т.е. добавим к <input> с type="text" класс text-field__input, к <label> – text-field__label, а затем обернём их в элемент <div> с классом text-field.

Теперь напишем стили для этих элементов. А также сразу включим в них стили для нормализации, чтобы не добавлять их отдельно:

/* установим отступ 1rem от нижнего края элемента */
.text-field {
  margin-bottom: 1rem;
}
/* стили для label */
.text-field__label {
  display: block;
  margin-bottom: 0.25rem;
}
/* стили для input */
.text-field__input {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #bdbdbd;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Примененные CSS свойства к элементу <input>, и то, что они делают:

• display: block – устанавливает блочное отображение;
• width: 100% – занимает всю доступную ширину;
• height: calc(2.25rem + 2px) – высота элемента определяется путём сложения 2.25rem (font-size * line-height + padding-top + padding-bottom) и 2px (ширина верхней и нижней границы);
• margin: 0 – убирает margin отступы;
• padding: 0.375rem 0.75rem – внутренние поля: сверху и снизу – 0.375rem, а слева и справа – 0.75rem;
• font-family: inherit – чтобы шрифт был такой как у родительского элемента, а не тот который браузер по умолчанию назначает для <input>;
• font-size: 1rem – устанавливает явный размер шрифта, иначе будет браться из стилей браузера для <input>;
• font-weight: 400 – задаёт начертание шрифта;
• line-height: 1.5 – высота строки (1.5 * размер шрифта);
• color: #212529 – цвет шрифта;
• background-color: #fff – цвет фона;
• background-clip: padding-box – указывает, что фон (фоновое изображение) нужно рисовать только до внешнего края отступа (под границей не выводить);
• border: 1px solid #bdbdbd – устанавливает границу, у которой: 1px (толщина), solid (тип линии) и #bdbdbd (цвет);
• border-radius: 0.25rem – радиус скругления углов;
• transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out – выполняет изменение значений свойств border-color и box-shadow с анимацией длительностью 0.15 секунд посредством временной функцией ease-in-out.

В результате получили следующее оформление:

Посмотреть

Стилизуем плейсхолдер. По умолчанию плейсхолдер отображается полупрозрачным или светло-серым цветом. Получить его можно с помощью ::placeholder. Оформим его следующим образом:

.text-field__input::placeholder {
  color: #212529;
  opacity: 0.4;
}

Посмотреть

Стили для <input> в состоянии фокуса (получить это состояние можно с помощью псевдокласса :focus):

.text-field__input:focus {
  color: #212529;
  background-color: #fff;
  border-color: #bdbdbd;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25);
}

Посмотреть

Оформление <input>, когда он находится в состоянии disabled и readonly:

<style>
.text-field__input:disabled,
.text-field__input[readonly] {
  background-color: #f5f5f5;
  opacity: 1;
}
</style>

<!-- disabled -->
<div class="text-field">
  <label for="firstname">Имя пользователя (disabled)</label>
  <input type="text" name="firstname" id="firstname" placeholder="Alaxander" disabled>
</div>
<!-- readonly -->
<div class="text-field">
  <label for="city">Город (readonly)</label>
  <input class="text-field__input" type="text" name="city" id="city" placeholder="Moscow" value="Moscow" readonly>
</div>

Посмотреть

Этот набор стилей будет у нас отправной точкой для создания других.

input с иконкой

Рассмотрим пример вставки в input иконки с помощью псевдоэлементов.

Для этого дополнительно обернём элемент <input> в <div> с классами text-field__icon text-field__icon_email:

<div class="text-field">
  <label class="text-field__label" for="email">Email</label>
  <div class="text-field__icon text-field__icon_email">
    <input class="text-field__input" type="email" placeholder="alexander@itchief.ru" value="alexander@itchief.ru">
  </div>
</div>
<div class="text-field">
  <label class="text-field__label" for="text">Найти</label>
  <div class="text-field__icon text-field__icon_search">
    <input class="text-field__input" type="text" placeholder="css" value="css уроки">
  </div>
</div>

Первый класс (text-field__icon) будем использовать для того, чтобы установить относительное позиционирование (position: relative). Это действие позволит нам разместить иконку в нужном месте относительно input, используя уже абсолютное позиционирование (position: absolute). Второй класс (text-field__icon_email) будет определять иконку, которую мы хотим вставить.

.text-field__icon {
  position: relative;
}
.text-field__icon::before {
  content: '';
  color: #bdbdbd;
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
}
.text-field__icon .text-field__input {
  padding-left: 2rem;
}
/* email значок */
.text-field__icon_email::before {
  content: '@';
}
/* иконка лупы */
.text-field__icon_search::before {
  width: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bdbdbd' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

Посмотреть

Ещё один вариант оформления:

Посмотреть

input с активной svg-иконкой

В этом примере поместим в input иконку, на которую можно нажать.

<div class="text-field">
  <label class="text-field__label" for="search">Найти</label>
  <div class="text-field__icon">
    <input class="text-field__input" type="search" name="search" id="search" placeholder="css" value="css уроки">
    <span class="text-field__aicon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /></svg>
    </span>
  </div>
</div>

Для этого мы также как и в предыдущем примере обернули <input> в <div class="text-field__icon">...<div>. Саму svg-иконку обернули в <span> с классом text-field__aicon и поместили рядом с <input>.

Оформление выполнили так:

.text-field__icon {
  position: relative;
}
.text-field__icon input {
  padding-right: 2.5rem;
}
.text-field__aicon {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
  right: 0.875rem;
  width: 1rem;
  cursor: pointer;
  color: #bdbdbd;
  transition: color 0.15s ease-in-out;
}
.text-field__aicon:hover {
  color: #212529;
}

Посмотреть

Ещё пример вставки иконки в input:

Посмотреть

input с кнопкой

HTML-разметка input с кнопкой:

<div class="text-field">
  <label class="text-field__label" for="search">Найти</label>
  <div class="text-field__group">
    <input class="text-field__input" type="search" id="search" name="search">
    <button class="text-field__btn" type="button">Найти</button>
  </div>
</div>

Расположение кнопки справа от input выполним с помощью флексов:

.text-field__group {
  display: flex;
}
/* кнопка */
.text-field__btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #eee;
  border: 1px solid #bdbdbd;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: background-color .15s ease-in-out;
}
.text-field__btn:hover {
  background-color: #bdbdbd;
}
.text-field__group .text-field__input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  z-index: 2;
}
.text-field__group .text-field__btn {
  position: relative;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}

Посмотреть

input с плавающим label

Разметка input с плавающим label:

<div class="text-field text-field_floating">
  <input class="text-field__input" type="email" id="email" placeholder="alexander@itchief.ru">
  <label class="text-field__label" for="email">Email</label>
</div>
<p>Когда указано значение value:</p>
<div class="text-field text-field_floating">
  <input class="text-field__input" type="name" id="name" value="Alexander">
  <label class="text-field__label" for="name">Name</label>
</div>

CSS код:

.text-field_floating {
  position: relative;
}
.text-field_floating .text-field__input {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
  padding: 1rem 0.75rem;
}
.text-field_floating .text-field__label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem .75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity .15s ease-in-out, transform .15s ease-in-out;
}
.text-field_floating .text-field__input::-moz-placeholder {
  color: transparent;
}
.text-field_floating .text-field__input::placeholder {
  color: transparent;
}
.text-field_floating .text-field__input:focus,
.text-field_floating .text-field__input:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: .625rem;
}
.text-field_floating .text-field__input:focus~.text-field__label,
.text-field_floating .text-field__input:not(:placeholder-shown)~.text-field__label {
  opacity: .65;
  transform: scale(.85) translateY(-.75rem) translateX(.15rem);
}

Посмотреть

Ещё один вариант с «плавающей» меткой:

Посмотреть

Третий вариант:

Посмотреть

input со счётчиком символов

Пример в котором под input отображается количество набранных символов и максимальная длина:

Посмотреть

Это выполняется посредством следующего кода:

<div class="text-field">
  <label class="text-field__label" for="login">Логин</label>
  <input class="text-field__input" type="text" name="login" id="login" placeholder="Login" maxlength="20" required>
  <div class="text-field__counter"></div>
</div>

<script>
const elemLogin = document.querySelector('#login');
const elemCounter = elemLogin.nextElementSibling;
const maxLength = elemLogin.maxLength;
const updateCounter = (e) => {
  const len = e ? e.target.value.length : 0;
  elemCounter.textContent = `${len} / ${maxLength}`;
}
updateCounter();
elemLogin.addEventListener('keyup', updateCounter);
elemLogin.addEventListener('keydown', updateCounter);
</script>

Стили для отображения состояния валидации input

Применить стили в зависимости от состояния поля в CSS можно с помощью специальных псевдоклассов. Например, :valid позволяет выбрать валидные элементы, а :invalid — не валидные.

.text-field__input:invalid,
.text-field__input:valid {
  border-color: #dc3545;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5625rem center;
  background-size: 1.125rem 1.125rem;
}
.text-field__input:valid {
  border-color: #198754;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
.text-field__input:invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.text-field__input:valid:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
}

Но, если вы хотите контролировать этот процесс и добавлять стили с помощью JavaScript, то тогда лучше это делать через классы. Например, использовать класс text-field__input_valid при успешной валидации, а
text-field__input_invalid — при не успешной. Их следует добавлять к <input>.

<div class="text-field">
  <label class="text-field__label" for="city">City</label>
  <!-- text-field__input_invalid -->
  <input class="text-field__input text-field__input_invalid" type="text" name="city" id="city">
  <div class="text-field__message">Укажите город.</div>
</div>
<div class="text-field">
  <label class="text-field__label" for="username">First name</label>
  <!-- text-field__input_valid -->
  <input class="text-field__input text-field__input_valid" type="text" name="firstname" id="firstname"
    value="Alexander">
  <div class="text-field__message">Отлично!</div>
</div>

Отображать сообщения пользователю или подсказки можно через <div class="text-field__message">...</div>.

Посмотреть

Для <input> с плавающим <label>:

Посмотреть

Посмотреть

Посмотреть

Пример валидации формы с помощью JavaScript

Валидацию элементов формы будем осуществлять с помощью функции checkValidity(). После этого, в зависимости от её результата, будем добавлять той или иной класс к <input>, а также сообщение (input.validationMessage) в элемент .text-field__message.

// input - переменная, содержащая элемент <input>
if (input.checkValidity()) {
  input.classList.add('text-field__input_valid');
  input.nextElementSibling.textContent = 'Отлично!';
} else {
  input.classList.add('text-field__input_invalid');
  input.nextElementSibling.textContent = input.validationMessage;
}

Т.к. мы будем сами отображать сообщения, то необходимо отключить стандартные подсказки браузера. Для этого к тегу <form> необходимо добавить атрибут novalidate:

<form id="form" action="#" novalidate>
  ...
</form>

Клиентская проверка формы после нажатия «Отправить»:

Посмотреть

Пример валидации формы в реальном времени:

Посмотреть

Отображение только ошибок:

Посмотреть

Перевод
статьи
«How to style forms with CSS: A beginner’s guide».

Приложения получают данные от
пользователей, в основном, через формы.
Возьмем для примера обычную форму
регистрации. Там всегда будет несколько
полей, куда пользователь может ввести
нужную информацию (свое имя, email и т. д.).

Раньше на сайтах были простые, скучные
HTML-формы без всякой стилизации. Но с
появлением CSS все изменилось. Благодаря
новейшим свойствам CSS мы сейчас можем
создавать куда более интересные и
красивые формы.

И это не мое личное мнение. На иллюстрации
ниже вы видите, как выглядит обычная
HTML-форма без CSS.

А вот та же форма, в оформлении которой
использовали каскадные таблицы стилей.

В этом руководстве мы покажем вам, как
воспроизвести такую форму, а также
расскажем о нескольких модификациях,
благодаря которым вы сможете создавать
впечатляющие и дружественные к
пользователю формы.

Наше руководство по стилизации форм
при помощи CSS будет состоять из шести
пунктов.

1. Определение размеров формы
   (box-sizing).
2. Селекторы CSS для элементов ввода
   (input).
3. Базовые методы стилизации для
   текстовых полей ввода.
4. Стилизация прочих полей ввода.
5. Псевдоклассы UI.
6. Элементы ввода, недоступные для
   кастомизации.

Прежде чем мы углубимся в нашу тему,
важно понять, что нет никаких особенных
стилей для форм. Ваши возможности в этом
плане ограничены только вашим воображением.
Это руководство лишь поможет вам начать
создавать собственные уникальные
варианты дизайна при помощи CSS.

Поехали!

1. Устанавливаем box-sizing

Я обычно устанавливаю *
{box-sizing:border-box;} не только для форм, но и
для веб-страниц. Благодаря этому ширина
(width) всех элементов будет содержать
внутренние отступы (padding).

Пример:

.some-class {
  width:200px;
  padding:20px;
}

Ширина
.some-class без box-sizing:border-box будет больше
200px, что может стать проблемой. Поэтому
большинство разработчиков используют
border-box для всех элементов.

Ниже приведена улучшенная версия
нашего первоначального кода. В нее также
добавлены псевдоэлементы :before и :after.

*, *:before, *:after {
  box-sizing: border-box;
}

Совет:
универсальный селектор * выбирает все
элементы в документе.

2. Селекторы CSS для элементов
ввода

Самый простой способ выбрать элементы
ввода — использовать селекторы атрибутов.

input[type=text] {
  // input elements with type="text" attribute
}
input[type=password] {
  // input elements with type="password" attribute
}

Эти селекторы будут выбирать все элементы ввода в документе. Если вам нужно выбрать какие-то специфические селекторы, следует добавить классы:

<input type="text" class="signup-text-input" />

Тогда:

.signup-text-input {
   // styles here
}

3. Базовые методы стилизации
для однострочных текстовых полей ввода

Чаще всего поля ввода в формах бывают
однострочными. Обычно такое поле
представляет собой простой блок с
границей (его вид зависит от браузера).

Вот HTML-разметка для однострочного
текстового поля с плейсхолдером.

<input type="text" placeholder="Name" />

Выглядеть это будет так:

Чтобы
сделать это текстовое поле более
привлекательным, можно использовать
следующие свойства CSS:

• Padding (внутренние отступы)
• Margin (внешние отступы)
• Border (граница)
• Box shadow (тень блока)
• Border radius (для скругления границ)
• Width (ширина)
• Font (шрифт)

Давайте пройдемся по каждому из этих
свойств.

Padding

Добавление некоторого внутреннего
пространства может повысить четкость.
Чтобы это сделать, применяем свойство
padding.

input[type=text] {
  padding: 10px;
}

Margin

Если рядом с вашим полем ввода есть
другие элементы, вы можете захотеть
добавить внешний отступ, чтобы избежать
слипания элементов.

input[type=text] {
  padding:10px;
  margin:10px 0; // add top and bottom margin
}

Border

В большинстве браузеров текстовые
поля ввода имеют границы, которые вы
можете кастомизировать.

.border-customized-input {
   border: 2px solid #eee;
}

Вы также можете вообще убрать границу.

.border-removed-input {
  border: 0;
}

Совет:
если убираете границу, обязательно
добавьте цвет фона или тень. В противном
случае пользователь просто не увидит
ваше поле.

Некоторые веб-дизайнеры предпочитают
оставлять только нижнюю границу. При
таком варианте пользователь как бы
будет писать на строчке, как в блокноте.

.border-bottom-input {
  border:0; // remove default border
  border-bottom:1px solid #eee; // add only bottom border
}

Box shadow

Свойство CSS box-shadow позволяет добавить
тень элемента. Меняя 5 значений этого
свойства, вы сможете добиться самых
разнообразных эффектов.

input[type=text] {
  padding:10px;
  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
}

Border radius

Свойство border-radius может очень сильно
изменить вид ваших форм. Поля для ввода
текста, имеющие скругление углов,
выглядят совсем иначе.

.rounded-input {
  padding:10px;
  border-radius:10px;
}

Комбинируя box-shadow и border-radius, вы можете существенно изменить вид полей.

Width

Используйте свойство width, чтобы
установить ширину поля ввода.

input {
  width:100%;
}

Font

Большинство браузеров используют
разные семейства шрифтов и размер шрифта
для элементов форм. Если необходимо,
можно установить наследование шрифта
от документа.

input, textarea {
  font-family:inherit;
  font-size: inherit;
}

4. Стилизация прочих типов полей ввода

Вы также можете прописывать стили и
для других полей — области текста,
радиокнопок, чек-боксов и пр.

Давайте рассмотрим подробнее каждое
из них.

Текстовые области (text areas)

Текстовые области напоминают
однострочные текстовые поля ввода, с
той лишь разницей, что здесь пользователь
может ввести не одну строку текста.
Обычно они используются, если нужно
принимать более «многословные» данные:
комментарии, сообщения и т. п. Для
стилизации этих областей вы можете
использовать все свойства, о которых
мы говорили ранее.

Также для текстовых областей применимо
и очень полезно свойство resize. В большинстве
браузеров текстовые области по умолчанию
могут растягиваться как по оси x, так и
по оси y (значение: both). Но вы можете
установить для этого свойства также
значение horizontal или vertical.

Посмотрите на пример:

See the Pen
Styled Textarea (for LogRocket) by Supun Kavinda (@SupunKavinda)
on CodePen.

Здесь
я использовал resize:vertical, чтобы разрешить
изменение размера исключительно по
вертикали. Такая практика применяется
в большинстве форм, поскольку позволяет
избежать появления горизонтальной
полосы прокрутки.

Примечание: если вам нужно создать
текстовую область с автоматическим
изменением размера, следует использовать
JavaScript. Но в нашей статье мы не будем
углубляться в эту тему.

Чекбоксы и радиокнопки

Дефолтные чекбоксы и радиокнопки
очень сложно стилизовать, для этого
требуется более сложный CSS-код (и HTML —
тоже).

Для стилизации чекбокса используйте
следующий HTML-код.

<label>Name
  <input type="checkbox" />
  <span></span>
</label>

Несколько
вещей, на которые нужно обратить внимание:

• Поскольку мы используем <label> в
  качестве обертки для <input>, если вы
  кликнете на любой элемент внутри
  <«label«>, «кликнутым» будет <input>.
• Мы спрячем <input>, потому что
  браузеры практически не позволяют нам
  его модифицировать.
• <span> создает пользовательский
  чекбокс.
• Чтобы получить положение «отмечено»
  и стилизовать пользовательский чекбокс,
  мы будем использовать псевдокласс
  input:checked.

Вот пользовательский чекбокс
(комментарии в CSS-коде поясняют происходящее
более подробно):

See the Pen
yLNKQBo by Supun Kavinda (@SupunKavinda)
on CodePen.

Вот пользовательская радиокнопка:

See the Pen
eYNMQNM by Supun Kavinda (@SupunKavinda)
on CodePen.

В
обоих примерах мы использовали одну и
ту же концепцию (input:checked).

В браузерах чекбоксы отображаются
квадратиками, а радиокнопки — кружочками.
Это лучше не менять, чтобы не путать
пользователя.

Раскрывающийся список

Раскрывающийся список позволяет
пользователю выбрать элемент из
нескольких предложенных вариантов.

<select name="animal">
    <option value="lion">Lion</option>
    <option value="tiger">Tiger</option>
    <option value="leopard">Leopard</option>
</select>

Вы
можете стилизовать элемент <select>,
чтобы он выглядел более привлекательно.

select {
  width: 100%;
  padding:10px;
  border-radius:10px;
}

Но вы не можете стилизовать выпадающие
элементы, потому что их стили зависят
от операционной системы. Единственный
способ изменить их вид — использовать
JavaScript.

Кнопки

Как и у большинства элементов, у кнопок
есть стили, установленные по умолчанию.

<button>Click Me</button>

Давайте немного украсим нашу кнопку.

button {

  /* remove default behavior */
  appearance:none;
  -webkit-appearance:none;

  /* usual styles */
  padding:10px;
  border:none;
  background-color:#3F51B5;
  color:#fff;
  font-weight:600;
  border-radius:5px;
  width:100%;

}

5. Псевдоклассы UI

Ниже приведен список псевдоклассов,
которые широко используются с элементами
форм.

Эти псевдоклассы могут использоваться
для показа уведомлений в зависимости
от атрибутов элемента:

• :required
• :valid и :invalid
• :checked (этим мы уже пользовались)

Эти могут использоваться для создания
эффектов для каждого состояния:

• :hover
• :focus
• :active

Сообщения, генерируемые при
помощи :required

Показываем сообщение о том, что
заполнение поля является обязательным:

<label>Name
  <input type="text">
  <span></span>
</label>
<label>Email
  <input type="text" required>
  <span></span>
</label>


label {
  display:block;
}
input:required + span:after {
  content: "Required";
}

Если
вы удалите атрибут required при помощи
JavaScript, сообщение «Required» исчезнет
автоматически.

Примечание: <input> не может содержать
другие элементы. А значит, и псевдоэлементы
:after или :before. Поэтому нам нужно использовать
другой элемент — <span>.

Мы можем сделать то же самое с
псевдоклассами :valid и :invalid.

:hover и :focus

:hover выбирает элемент, когда на него
наводится курсор мыши. :focus выбирает
элемент, когда тот в фокусе.

Эти псевдоклассы часто используются
для создания переходов и легких визуальных
изменений. Например, можно менять ширину,
цвет фона, цвет границы, густоту тени и
т. п. Если вместе с этими свойствами
использовать свойство transition, изменения
будут более плавными.

Вот несколько эффектов наведения для
элементов формы (попробуйте навести
курсор на разные поля):

See the Pen
yLNKZqg by Supun Kavinda (@SupunKavinda)
on CodePen.

Когда пользователь видит небольшие
изменения в элементе, происходящие при
наведении мыши, он понимает, что с
элементом можно что-то делать. Это важно
для дизайна элементов форм.

Вы замечали, что в некоторых браузерах
вокруг элемента, находящегося в фокусе,
появляется синяя внешняя граница? Вы
можете использовать псевдокласс :focus,
чтобы удалить ее и добавить другие
эффекты для элемента в фокусе.

Следующий код удаляет внешнюю границу
для всех элементов:

*:focus {outline:none !important}

Добавляем внешнюю границу для элементов
в фокусе:

input[type=text]:focus {
  background-color: #ffd969;
  border-color: #000;
  // and any other style
}

6. Элементы ввода, недоступные для
кастомизации

Стилизация элементов форм всегда была
сложной задачей. Есть некоторые элементы,
с которыми не многое можно сделать в
плане изменения стиля. Например:

• <input type=»color»>
• <input type=»file»>
• <progress>
• <option>, <optgroup>, <datalist>

Эти элементы предоставляются браузером
и стилизуются в зависимости от вашей
ОС. Единственный способ изменить их
стиль — использовать кастомные контролы
(Custom Controls), созданные при помощи div, span и
прочих HTML-элементов, поддающихся
стилизации.

Например, чтобы стилизовать <input
type=»file»>, мы можем спрятать дефолтный
input и использовать пользовательскую
кнопку.

Кастомные контролы для элементов форм
уже разработаны для основных
JavaScript-библиотек. Найти их можно на
GitHub.

Заключение

К этому моменту у вас уже должно
появиться понимание того, как стилизуются
простые элементы форм и как использовать
кастомные контролы для стилизации
остальных элементов. Конечно, это лишь
основные строительные блоки, при помощи
которых вы можете создавать стили,
рисуемые вашим воображением.

В качестве совета напоследок: не забывайте делать все ваши формы отзывчивыми.

В этой статье рассмотрим различные варианты стилизации текстовых полей HTML-форм. Сначала создадим базовый вариант оформления input, а затем множество других, дополняя каждый из них небольшим количеством CSS.

Введение

Веб-формы являются неотъемлемой частью многих веб-сайтов. Они позволяют пользователю ввести те или иные данные, которые затем отправляются на сервер или обрабатываются на стороне клиента, например, для изменения интерфейса.

Веб-формы также часто называют HTML-формами. Их проектирование осуществляется с помощью элементов управления форм (текстовых полей, выпадающих списков, кнопок, чекбоксов и т.д.) и некоторых дополнительных элементов, которые используются для придание форме определённой структуры.

Стилизация формы выполняется через CSS. В этом руководстве остановимся и подробно рассмотрим различные варианты оформления её текстовых полей.

Исходные коды примеров расположены на GitHub в папке text-field проекта «ui-components».

Нормализация стилей

1. Настройка box-sizing.

Обычно хорошей практикой считается для всех элементов включая псевдоэлементы установить box-sizing: border-box:

*, *::before, *::after {
  box-sizing: border-box;
}

В этом случае браузер при рассчитывании ширины и высоты элементов будет включать в них поля (padding) и границы (border). Как правило, это сильно упрощает работу с размерами элементов, и избавляет нас от множества проблем при размещении контента.

2. Нормализация стилей <input>.

Для того чтобы <input> в разных браузерах отображался как можно более одинаково необходимо добавить следующее:

/* 1 – Изменим стили шрифтов */
/* 2 – Удалим margin в Firefox и Safari */
input[type="text"] {
  font-family: inherit; /* 1 */
  font-size: inherit; /* 1 */
  line-height: inherit; /* 1 */
  margin: 0; /* 2 */
}

Для удобного добавления к элементам стилей создадим следующую HTML-разметку:

<div class="text-field">
  <label class="text-field__label" for="login">Логин</label>
  <input class="text-field__input" type="text" name="login" id="login" placeholder="Login" value="itchief">
</div>

Т.е. добавим к <input> с type="text" класс text-field__input, к <label> – text-field__label, а затем обернём их в элемент <div> с классом text-field.

Теперь напишем стили для этих элементов. А также сразу включим в них стили для нормализации, чтобы не добавлять их отдельно:

/* установим отступ 1rem от нижнего края элемента */
.text-field {
  margin-bottom: 1rem;
}
/* стили для label */
.text-field__label {
  display: block;
  margin-bottom: 0.25rem;
}
/* стили для input */
.text-field__input {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: 0.375rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #bdbdbd;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

Примененные CSS свойства к элементу <input>, и то, что они делают:

• display: block – устанавливает блочное отображение;
• width: 100% – занимает всю доступную ширину;
• height: calc(2.25rem + 2px) – высота элемента определяется путём сложения 2.25rem (font-size * line-height + padding-top + padding-bottom) и 2px (ширина верхней и нижней границы);
• margin: 0 – убирает margin отступы;
• padding: 0.375rem 0.75rem – внутренние поля: сверху и снизу – 0.375rem, а слева и справа – 0.75rem;
• font-family: inherit – чтобы шрифт был такой как у родительского элемента, а не тот который браузер по умолчанию назначает для <input>;
• font-size: 1rem – устанавливает явный размер шрифта, иначе будет браться из стилей браузера для <input>;
• font-weight: 400 – задаёт начертание шрифта;
• line-height: 1.5 – высота строки (1.5 * размер шрифта);
• color: #212529 – цвет шрифта;
• background-color: #fff – цвет фона;
• background-clip: padding-box – указывает, что фон (фоновое изображение) нужно рисовать только до внешнего края отступа (под границей не выводить);
• border: 1px solid #bdbdbd – устанавливает границу, у которой: 1px (толщина), solid (тип линии) и #bdbdbd (цвет);
• border-radius: 0.25rem – радиус скругления углов;
• transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out – выполняет изменение значений свойств border-color и box-shadow с анимацией длительностью 0.15 секунд посредством временной функцией ease-in-out.

В результате получили следующее оформление:

Посмотреть

Стилизуем плейсхолдер. По умолчанию плейсхолдер отображается полупрозрачным или светло-серым цветом. Получить его можно с помощью ::placeholder. Оформим его следующим образом:

.text-field__input::placeholder {
  color: #212529;
  opacity: 0.4;
}

Посмотреть

Стили для <input> в состоянии фокуса (получить это состояние можно с помощью псевдокласса :focus):

.text-field__input:focus {
  color: #212529;
  background-color: #fff;
  border-color: #bdbdbd;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25);
}

Посмотреть

Оформление <input>, когда он находится в состоянии disabled и readonly:

<style>
.text-field__input:disabled,
.text-field__input[readonly] {
  background-color: #f5f5f5;
  opacity: 1;
}
</style>

<!-- disabled -->
<div class="text-field">
  <label for="firstname">Имя пользователя (disabled)</label>
  <input type="text" name="firstname" id="firstname" placeholder="Alaxander" disabled>
</div>
<!-- readonly -->
<div class="text-field">
  <label for="city">Город (readonly)</label>
  <input class="text-field__input" type="text" name="city" id="city" placeholder="Moscow" value="Moscow" readonly>
</div>

Посмотреть

Этот набор стилей будет у нас отправной точкой для создания других.

input с иконкой

Рассмотрим пример вставки в input иконки с помощью псевдоэлементов.

Для этого дополнительно обернём элемент <input> в <div> с классами text-field__icon text-field__icon_email:

<div class="text-field">
  <label class="text-field__label" for="email">Email</label>
  <div class="text-field__icon text-field__icon_email">
    <input class="text-field__input" type="email" placeholder="alexander@itchief.ru" value="alexander@itchief.ru">
  </div>
</div>
<div class="text-field">
  <label class="text-field__label" for="text">Найти</label>
  <div class="text-field__icon text-field__icon_search">
    <input class="text-field__input" type="text" placeholder="css" value="css уроки">
  </div>
</div>

Первый класс (text-field__icon) будем использовать для того, чтобы установить относительное позиционирование (position: relative). Это действие позволит нам разместить иконку в нужном месте относительно input, используя уже абсолютное позиционирование (position: absolute). Второй класс (text-field__icon_email) будет определять иконку, которую мы хотим вставить.

.text-field__icon {
  position: relative;
}
.text-field__icon::before {
  content: '';
  color: #bdbdbd;
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
}
.text-field__icon .text-field__input {
  padding-left: 2rem;
}
/* email значок */
.text-field__icon_email::before {
  content: '@';
}
/* иконка лупы */
.text-field__icon_search::before {
  width: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bdbdbd' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

Посмотреть

Ещё один вариант оформления:

Посмотреть

input с активной svg-иконкой

В этом примере поместим в input иконку, на которую можно нажать.

<div class="text-field">
  <label class="text-field__label" for="search">Найти</label>
  <div class="text-field__icon">
    <input class="text-field__input" type="search" name="search" id="search" placeholder="css" value="css уроки">
    <span class="text-field__aicon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /></svg>
    </span>
  </div>
</div>

Для этого мы также как и в предыдущем примере обернули <input> в <div class="text-field__icon">...<div>. Саму svg-иконку обернули в <span> с классом text-field__aicon и поместили рядом с <input>.

Оформление выполнили так:

.text-field__icon {
  position: relative;
}
.text-field__icon input {
  padding-right: 2.5rem;
}
.text-field__aicon {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
  right: 0.875rem;
  width: 1rem;
  cursor: pointer;
  color: #bdbdbd;
  transition: color 0.15s ease-in-out;
}
.text-field__aicon:hover {
  color: #212529;
}

Посмотреть

Ещё пример вставки иконки в input:

Посмотреть

input с кнопкой

HTML-разметка input с кнопкой:

<div class="text-field">
  <label class="text-field__label" for="search">Найти</label>
  <div class="text-field__group">
    <input class="text-field__input" type="search" id="search" name="search">
    <button class="text-field__btn" type="button">Найти</button>
  </div>
</div>

Расположение кнопки справа от input выполним с помощью флексов:

.text-field__group {
  display: flex;
}
/* кнопка */
.text-field__btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #eee;
  border: 1px solid #bdbdbd;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: background-color .15s ease-in-out;
}
.text-field__btn:hover {
  background-color: #bdbdbd;
}
.text-field__group .text-field__input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  z-index: 2;
}
.text-field__group .text-field__btn {
  position: relative;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}

Посмотреть

input с плавающим label

Разметка input с плавающим label:

<div class="text-field text-field_floating">
  <input class="text-field__input" type="email" id="email" placeholder="alexander@itchief.ru">
  <label class="text-field__label" for="email">Email</label>
</div>
<p>Когда указано значение value:</p>
<div class="text-field text-field_floating">
  <input class="text-field__input" type="name" id="name" value="Alexander">
  <label class="text-field__label" for="name">Name</label>
</div>

CSS код:

.text-field_floating {
  position: relative;
}
.text-field_floating .text-field__input {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
  padding: 1rem 0.75rem;
}
.text-field_floating .text-field__label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem .75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity .15s ease-in-out, transform .15s ease-in-out;
}
.text-field_floating .text-field__input::-moz-placeholder {
  color: transparent;
}
.text-field_floating .text-field__input::placeholder {
  color: transparent;
}
.text-field_floating .text-field__input:focus,
.text-field_floating .text-field__input:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: .625rem;
}
.text-field_floating .text-field__input:focus~.text-field__label,
.text-field_floating .text-field__input:not(:placeholder-shown)~.text-field__label {
  opacity: .65;
  transform: scale(.85) translateY(-.75rem) translateX(.15rem);
}

Посмотреть

Ещё один вариант с «плавающей» меткой:

Посмотреть

Третий вариант:

Посмотреть

input со счётчиком символов

Пример в котором под input отображается количество набранных символов и максимальная длина:

Посмотреть

Это выполняется посредством следующего кода:

<div class="text-field">
  <label class="text-field__label" for="login">Логин</label>
  <input class="text-field__input" type="text" name="login" id="login" placeholder="Login" maxlength="20" required>
  <div class="text-field__counter"></div>
</div>

<script>
const elemLogin = document.querySelector('#login');
const elemCounter = elemLogin.nextElementSibling;
const maxLength = elemLogin.maxLength;
const updateCounter = (e) => {
  const len = e ? e.target.value.length : 0;
  elemCounter.textContent = `${len} / ${maxLength}`;
}
updateCounter();
elemLogin.addEventListener('keyup', updateCounter);
elemLogin.addEventListener('keydown', updateCounter);
</script>

Стили для отображения состояния валидации input

Применить стили в зависимости от состояния поля в CSS можно с помощью специальных псевдоклассов. Например, :valid позволяет выбрать валидные элементы, а :invalid – не валидные.

.text-field__input:invalid,
.text-field__input:valid {
  border-color: #dc3545;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.5625rem center;
  background-size: 1.125rem 1.125rem;
}
.text-field__input:valid {
  border-color: #198754;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}
.text-field__input:invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.text-field__input:valid:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
}

Но, если вы хотите контролировать этот процесс и добавлять стили с помощью JavaScript, то тогда лучше это делать через классы. Например, использовать класс text-field__input_valid при успешной валидации, а text-field__input_invalid – при не успешной. Их следует добавлять к <input>.

<div class="text-field">
  <label class="text-field__label" for="city">City</label>
  <!-- text-field__input_invalid -->
  <input class="text-field__input text-field__input_invalid" type="text" name="city" id="city">
  <div class="text-field__message">Укажите город.</div>
</div>
<div class="text-field">
  <label class="text-field__label" for="username">First name</label>
  <!-- text-field__input_valid -->
  <input class="text-field__input text-field__input_valid" type="text" name="firstname" id="firstname"
    value="Alexander">
  <div class="text-field__message">Отлично!</div>
</div>

Отображать сообщения пользователю или подсказки можно через <div class="text-field__message">...</div>.

Посмотреть

Для <input> с плавающим <label>:

Посмотреть

Посмотреть

Посмотреть

Пример валидации формы с помощью JavaScript

Валидацию элементов формы будем осуществлять с помощью функции checkValidity(). После этого, в зависимости от её результата, будем добавлять той или иной класс к <input>, а также сообщение (input.validationMessage) в элемент .text-field__message.

// input - переменная, содержащая элемент <input>
if (input.checkValidity()) {
  input.classList.add('text-field__input_valid');
  input.nextElementSibling.textContent = 'Отлично!';
} else {
  input.classList.add('text-field__input_invalid');
  input.nextElementSibling.textContent = input.validationMessage;
}

Т.к. мы будем сами отображать сообщения, то необходимо отключить стандартные подсказки браузера. Для этого к тегу <form> необходимо добавить атрибут novalidate:

<form id="form" action="#" novalidate>
  ...
</form>

Клиентская проверка формы после нажатия «Отправить»:

Посмотреть

Пример валидации формы в реальном времени:

Посмотреть

Отображение только ошибок:

Внешний вид HTML-формы можно значительно улучшить с помощью CSS:

Стилизация полей ввода

Используйте свойство width для определения ширины поля ввода:

First Name

Приведенный выше пример применяется ко всем элементам <input>. Если требуется только стиль определенного типа ввода, можно использовать селекторы атрибутов:

• input[type=text] — выберет только текстовые поля
• input[type=password] — будет только выбрать поля пароля
• input[type=number] — выберет только числовые поля
• etc..

Мягкие входы

Используйте свойство padding для добавления пространства внутри текстового поля.

Совет: Когда у вас есть много входов друг за другом, вы также можете добавить некоторые margin, чтобы добавить больше места за пределами них:

First Name

Last Name

Обратите внимание, что мы установили свойство box-sizing в border-box. Это гарантирует, что заполнение и в конечном итоге границы включаются в общую ширину и высоту элементов.
Подробнее о box-sizing собственности в нашей CSS Box калибровк и главы.

Входы на границе

Используйте свойство border для изменения размера и цвета границы и используйте свойство border-radius для добавления скругленных углов:

First Name

Если требуется только нижняя граница, используйте свойство border-bottom:

First Name

Цветные входы

Используйте свойство background-color, чтобы добавить цвет фона для входных данных и свойство color для изменения цвета текста:

Сфокусированные входы

По умолчанию некоторые обозреватели будут добавлять синие контуры вокруг ввода, когда он получает фокус (нажал на). Это поведение можно удалить, добавив outline: none; к входным данным.

Используйте селектор :focus, чтобы сделать что-то с полем ввода, когда он получает фокус:

Вход со значком/изображением

Если требуется значок внутри входных данных, используйте свойство background-image и поместите его со свойством background-position. Также обратите внимание, что мы добавляем большое левое заполнение, чтобы зарезервировать пространство значка:

Анимированный поисковый ввод

В этом примере мы используем свойство CSS transition для анимации ширины ввода поиска, когда он получает фокус. Вы узнаете больше о
transition свойстве позже, в нашей главе переходы CSS.

Стилизация текстового

Совет: Используйте свойство resize для предотвращения изменения размера текстового объекта (отключите «захват» в правом нижнем углу):

Стилизация меню выбора

Стилизация кнопок ввода

Для получения дополнительных сведений о том, как стиль кнопок с CSS, прочитайте наши CSS кнопки справочник.

Адаптивная форма

Измените размер окна обозревателя, чтобы увидеть эффект. Когда экран меньше, чем 600px шириной, сделать два столбца стека друг на друга, а не рядом друг с другом.

Продвинутый: В следующем примере для создания адаптивной формы используются запросы мультимедиа. Вы узнаете больше об этом в более поздней главе.