От автора: Во второй статье из трех, повествующих о формах HTML5, мы рассмотрим стили или, если точнее — селекторы псевдо-классов, которыми можно воспользоваться для выбора полей ввода в различных состояниях. Если вы еще не читали эту серию статей, пожалуйста, начните с первой и убедитесь в том, что понимаете основные концепции разметки.
Удаление стилей по умолчанию
Вы наверняка уже заметили, что браузеры применяют форматирование поумолчанию. Например, большая часть браузеров применяют к блокам search закругленные углы и добавляют тонкие фоновые градиенты, которые в «плоском» дизайне могут смотреться неуместно.
Для удаления стилей по умолчанию можно воспользоваться свойством appearance: none;,которому требуются префиксы. Однако применяйте его с осторожностью, так как оно способно удалить важные стили — в Chrome’е исчезают чекбоксы и радиокнопки! Чтобы обезопасить себя, пользуйтесь этим свойством только тогда, когда оно требуется и тестируйте его во всех возможных браузерах, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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; } |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееОбратите внимание, что, кроме того, я сделал сброс outline и box-shadow для удаления фокусирования на уродливой голубой тени блока по умолчанию и стили ошибок во всех браузерах. Свойство appearance задокументировано в CSS-Tricks, но находится пока в «сыром» состоянии.
:focus
:focus поддерживается со времен CSS2.1 и определяет стили используемого в данный момент поля, например:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
input:focus, textarea:focus, select:focus { background-color: #eef; } <pre class="lang:CSS"> <p><strong>:checked</strong></p> <p>Стили :checked применяются к отмеченным чекбоксам или радиокнопкам, например:</p> <pre class="lang:HTML"> <inputtype="checkbox"name="test"/> <labelfor="test">check me</label> |
|
1 2 3 |
input:checked ~ label { font-weight: bold; } |
Соответствующего селектора«:unchecked» не существует, но он вам и не нужен: просто создайте стиль по умолчанию, а затем примените изменения при активированном :checked. В качестве альтернативы можно использовать :not(:checked).
:indeterminate
Технически :indeterminate пока не включен в спецификацию, однако упоминается. Согласно спецификации, он представляет чекбокс или радиокнопку, которые «и не отмечены, и не неотмечены».
Непривычно то, что он применяет стили лишь тогда, когда вы устанавливаете свойство чекбокса .indeterminate посредством JavaScript, то есть:
|
1 |
document.getElementById("mycheckbox").indeterminate = true; |
Он не оказывает никакого влияния на свойство .checked, которое может быть либо верным (true), либо неверным (false).
:indeterminate в некоторых ситуацияхможет оказаться полезен. Если у вас целый список чекбоксов, то можно сделать чекбокс «checkall» (выделить все), который при нажатии отмечал бы или убирал отметку из всех пунктов списка. Однако, если отметить несколько пунктов, то чекбокс «checkall» придет в неопределенное состояние indeterminate.
:required
:required применяет стили к любому input, у которого имеется атрибут required и должен вводиться прямо перед отправкой формы (submit).
: optional
: optional применяет стили к любому input, у которого отсутствует атрибут required. Не знаю, зачем его добавляют, если учесть, что :not(:required) делал бы то же самое?!
:valid
:valid применяет стили к любому input, который в данный момент содержит достоверные данные.
:invalid
Аналогично :invalid (или :not(:valid)) применяет стили к любому input, который вданный момент содержит неверные данные, например:
|
1 2 3 |
input:invalid { border-color: #900; } |
:in-range(ввод чисел и диапазонов)
Числа и диапазоны, содержащие верные значения между атрибутами min и max, которые крепятся к значению step, можно выбирать с помощью :in-range. Конечно, слайдеру немного сложно выйти за пределы диапазона, но все же…
: out-of-range(ввод чисел и диапазонов)
: out-of-range выбираетнедостоверныечисловыезначения ввода диапазона.
:disabled
input-ы с атрибутом disabled можно выбрать с помощью псевдо-класса :disabled, например:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 2 3 4 |
input:disabled { color: #ccc; background-color: #eee; } |
Помните, что неактивные поля не подвергаются валидации и их данные не будут передаваться на сервер. Однако стили для таких псевдо-классов, как :required и :invalid все равно будут применяться.
:enabled
Подобным же образом, не деактивированные поля можно выбирать с помощью :enabled (или :not(:disabled)). Наделе же вам вряд ли потребуется этот селектор, так как он является стилем input по умолчанию.
:read-only
input-ы с атрибутом readonly можно выбрать с помощью псевдо-класса :read-only. Помните о том, что input только для чтения (read-only) все равно подвергаются валидации и отправке на сервер, но пользователь не может менять их значения.
:read-write
Стандартные поля для чтения/ввода можно выбрать с помощью :read-write (или :not(:read-only)). Ион тоже не из тех селекторов, которые могут вам часто понадобиться.
:default(кнопки отправки)
Наконец, у нас остался селектор :default, который применяет стили к кнопке отправки по умолчанию.
Стиль текста-заполнителя
Назначить стили атрибуту текста placeholder можно с помощью псевдо-элемента ::placeholder с вендорными префиксами (в отдельных правилах), например:
|
1 2 3 4 |
input::-webkit-input-placeholder { color: #ccc; } input::-moz-placeholder { color: #ccc; } input:-ms-input-placeholder { color: #ccc; } input::placeholder { color: #ccc; } |
Специфика CSS
Вышеупомянутые селекторы обладают одной спецификой, поэтому необходимо с осторожностью определять два и более стилей, применимых к одному и тому же input-у. Сравните:
|
1 2 |
input:invalid { color: red; } input:enabled { color: black; } |
Здесь нам требуется выбрать все неверные поля и применить красный текст, но этого никогда не произойдет, так как мы определили все активные поля, где далее в таблице стилей будет черный текст. Пусть ваши селекторы будут простыми и воспользуйтесь минимальным количеством кода. Например, пустое обязательное поле :required будет невалидным :invalid, так что ему редко придется назначать стили.
«Облачко» валидации
При отправке первое неверное значение выделяется «облачком» с сообщением об ошибке:
Дизайн «облачка» меняется в зависимости от устройства и браузера, и лишь браузеры Webkit/Blink позволяют некоторый уровень нестандартной настройки CSS:
|
1 2 3 4 |
::-webkit-validation-bubble { ... } ::-webkit-validation-bubble-arrow { ... } ::-webkit-validation-bubble-message { ... } ::-webkit-validation-bubble-arrow-clipper { ... } |
Мой вам совет: даже не пытайтесь. Если вам потребуется пользовательское форматирование сообщений об ошибках, то почти наверняка придется применить пользовательские сообщения. А для них потребуется JavaScript.
Браузерная поддержка
В общем и целом, важные стили и селекторы работают во всех современных браузерах от IE10+. Некоторые из менее применяемых, вроде in-range –пока только в Webkit/Blink. Более старые браузеры поддерживают :focus, но для чего-то более сложного вам придется предусмотреть альтернативные варианты сJavaScript’ом.
Создание применимых форм
Вышеприведенные стили применяются немедленно. Например:
|
1 2 3 |
input:invalid { border-color: #900; } |
применяет к любому невалидному полю красную рамку. К сожалению, при первой загрузке страницы все поля могут быть невалидными, и пользователю придется столкнуться с пугающим набором красных блоков.
Я лично предпочитаю, чтобы ошибки показывались при отправке или, возможно, при переводе фокуса с неверно заполненного поля. У браузеров отсутствует встроенная возможность сделать это. Вы уже догадались — потребуется JavaScript. К счастью, программный интерфейс вынужденной валидации HTML5 предоставляет инструменты для:
Прекращения валидации до момента использования формы
Использования пользовательского сообщения об ошибке
Не поддерживаемых полифилом niput-ов
Обеспечения альтернативных стилей и валидации для старыхбраузеров и
Создания более применимых форм
Более подробно мы рассмотрим их в последней из серии этих статей.
Автор: Craig Buckler
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
