Формы в HTML5: CSS
Содержание цикла статей "Формы в HTML 5":
Часть 1 Формы в HTML5: Разметка
Часть 2 Формы в HTML5: CSS
Часть 3 Формы в HTML5: JavaScript и API для принудительной валидации форм
Это вторая статья из серии статей в трех частях «Формы в HTML5». В ней мы поговорим о стилизации, или дизайне, форм. А если говорить более точно, то о селекторах псевдо-классов, которые можно использовать для настройки полей ввода в различных состояниях.
Если же вы не читали часть первую, советую все - таки ее изучить, чтобы уяснить основные моменты концепции разметки.
Убираем дизайн по умолчанию
Возможно, вы замечали моменты, когда браузеры применяют форматирование по-умолчанию. Например, большинство браузеров закругляют углы у поля search и добавляют небольшой фоновый градиент, который смотрится нелепо посреди «плоского» дизайна.
Для того чтобы этого не происходило, используйте CSS-свойство appearance: none; свойство, требующее использования некоторых префиксов.
Но, думаю, вы ожидаете этого совета, используйте его с осторожностью, так как можете поплатиться некоторыми элементами - checkbox и radio buttons в Google Chrome исчезают!
Чтобы предотвратить подобное развитие событий, применяйте данное свойство только в необходимых случаях и проверяйте его работу на стольких браузерах, на скольких только возможно:
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
}Заметьте, я также обнулил свойства outline и box-shadow, чтобы убрать уродливую тень голубого цвета с окошка ввода и ошибку форматирования во всех браузерах.
Свойство appearance задокументировано на CSS-Tricks, но оно видоизменяется до сих пор.
:focus
Селектор :focus поддерживается с версии CSS 2.1 и устанавливает стилизацию поля ввода, используемого на данный момент. Для примера:
input:focus,
textarea:focus,
select:focus {
background-color: #eef;
}
:checked:checked
Селектор :checked применяется к отмеченным checkboxes и radio buttons, например:
<input type="checkbox" name="test" />
<label for="test">check me</label>
input:checked ~ label {
font-weight: bold;
}Здесь нет соответствия для ‘:unchecked’ переключателя, но он нам и не нужен. Просто создаём стиль по-умолчанию, а затем определяем стиль для состояния :checked. Или же можно использовать :not(:checked).
:indeterminate
Технически, селектор :indeterminate еще не отражен в спецификации, однако уже упомянут там. Согласно ей, он представляет собой флажок или переключатель, который «ни отмечен, ни не-отмечен».
Необычен он тем, что работает только тогда, когда вы применяете :indeterminate к чекбоксу с помощью JavaScript, например:
document.getElementById("mycheckbox").indeterminate = true;Эффекта на свойстве .checked это не возымеет, так как оно может быть только true или false.
Есть несколько ситуаций, когда селектор :indeterminate может оказаться полезен. В случае, когда есть группа флажков, можно сделать флажок - «отметить все», который ставит или снимает галочки сразу для всей группы.
Однако если вы отмечаете какие-либо из элементов группы, флажок «отметить все» сам переходит в неопределенное состояние.
:required
:required применяет стиль к полям ввода, у которых есть атрибут required.
:optional
:optional применяет стиль к полям ввода, которые НЕ имеют атрибута required. Не знаю, зачем добавили этот селектор, когда :not(:required) делает тоже самое?!
:valid
:valid применяет стиль ко всем полям ввода, которые заполнены корректно на данный момент.
:invalid
Соответственно, :invalid (или :not(:valid)) применяет стиль к полям, которые заполнены не корректно, к примеру:
input:invalid {
border-color: #900;
}:in-range (для полей ввода типа number и range)
Поля ввода типа number и range содержат корректные значения между атрибутами min и max, значения которых в свою очередь меняются с шагом, равным значению атрибута step.
Очевидно, что довольно трудно сделать так, чтобы значение слайдера оказалось вне его допустимого диапазона, но…
:out-of-range (для полей ввода типа number и range)
:out-of-range предназначается для полей, содержащих недопустимые значения диапазонов.
:disabled
К полям ввода с атрибутом disabled можно обратится с помощью псевдо-класса :disabled, к примеру так:
input:disabled {
color: #ccc;
background-color: #eee;
}Помните, что к отключенным полям не будет применяться проверка, а данные из этих полей не будут отправлены на сервер.
Стили к псевдо-классам :required и :invalid будут применяться.
:enabled
Аналогично, не отключенные поля могут быть выбраны с помощью селектора :enabled (или :not(:disabled)). На практике он вам вряд ли понадобится, так как к не отключенным полям применяется стиль по умолчанию.
:read-only
К полям с атрибутом readonly можно обратится с селектором :read-only . Помните, что readonly поля будут проверяться и отправляться на сервер, но пользователь изменить значения не сможет.
:read-write
Стандартные read-write поля могут быть выбраны с помощью :read-write (или :not(:read-only)). Опять же, это не тот селектор, которым вы будете часто пользоваться.
:default (только для кнопок типа submit или input)
И, наконец, мы подобрались к селектору :default, который применяет стиль к кнопке «Отправить».
Стиль текста
К атрибуту placeholder можно применить стиль, используя псевдо-элемент ::placeholder с префиксами разработчика, к примеру:
input::-webkit-input-placeholder { color: #ccc; }
input::-moz-placeholder { color: #ccc; }
input:-ms-input-placeholder { color: #ccc; }
input::placeholder { color: #ccc; }CSS специфика
Селекторы, описанные выше, имеют одинаковую специфику, потому при определении двух или более стилей, применяемых к одному и тому же полю, будьте внимательны.
К примеру:
input:invalid { color: red; }
input:enabled { color: black; }Здесь мы задаем стиль для всех отключенных полей - использовать красный текст, но этого никогда не произойдет, потому что для всех включенных полей позже мы определяем черный текст в таблице стилей.
Используйте простые варианты селекторов и минимум кода. Для примера, пустое :required поле будет являться :invalid, потому вряд ли понадобится применять к нему стили.
Проверочный пузырь
При подтверждении формы, первое неверное значение выделяется ошибкой-пузырьком:
Возможность дизайна пузырька зависит от устройства и от браузера. Браузеры Webkit / Blink позволяют использовать нестандартную настройку CSS:
:
::-webkit-validation-bubble { ... }
::-webkit-validation-bubble-arrow { ... }
::-webkit-validation-bubble-message { ... }
::-webkit-validation-bubble-arrow-clipper { ... }Моя рекомендация: не утруждайте себя попытками. Если вам нужно пользовательское форматирование сообщений об ошибках - вы наверняка захотите использовать пользовательские сообщения. А для этого вам понадобится JavaScript.
Поддержка браузерами
Как правило, важные стили и селекторы поддерживаются всеми современными браузерами от IE10 и выше. Некоторые менее полезные, например, in-range, на данный момент поддерживаются только Webkit/Blink.
Старые браузеры будут, к примеру, поддерживать :focus , но стоит позаботиться о JavaScript фол-бэках для более сложных свойств.
Создание юзабельных форм
Вышеуказанные стили применяются немедленно. Например:
input:invalid {
border-color: #900;
}Применит красную рамку ко всем некорректно заполненным полям. К сожалению, при первой загрузке страницы каждое поле окажется ошибочным, и пользователь столкнется с набором красных полей.
Лично я предпочитаю осуществлять проверку на ошибку в поле либо при отправке формы целиком, либо же при смене фокуса. Браузеры не предлагают способа делать это, основываясь только лишь на их возможностях. Вы уже догадались - нужен JavaScript.
К счастью, API в HTML5 предоставляет инструменты, которые позволяют:
- приостанавливать проверку, пока форма заполняется;
- использовать пользовательские сообщения об ошибках;
- обеспечить fall-back дизайн и проверку для старых браузеров;
- создавать более удобные формы.
Мы рассмотрим эти свойства подробнее в последней статье из этой серии.