Во второй статье этой серии из трех частей о формах HTML5 мы рассмотрим стилизацию или, более конкретно, селекторы псевдоклассов, которые можно использовать для нацеливания полей ввода в различных состояниях. Если вы еще не прочитали его, обратитесь к первой части, чтобы убедиться, что вы понимаете основные концепции разметки.
Удалить стиль по умолчанию
Вы, наверное, заметили, что браузеры применяют форматирование по умолчанию. Например, большинство браузеров применяют закругленные углы к полям search и добавляют тонкие градиенты фона, которые могут выглядеть неуместно на плоском дизайне.
Чтобы удалить стиль по умолчанию, вы можете использовать appearance: none; свойство, которое требует префиксов. Однако используйте его с осторожностью, поскольку он может удалить основные стили — флажки и переключатели исчезают в 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 чтобы убрать по умолчанию уродливый синий фокус с тенью и стиль ошибок во всех браузерах.
Свойство внешнего вида задокументировано на CSS-хитрости, но оно находится в состоянии изменения.
: фокус
:focus поддерживается с CSS2.1 и устанавливает стили для используемого в данный момент поля, например
input:focus, textarea:focus, select:focus { background-color: #eef; }
: проверено
:checked стили применяются к отмеченным флажкам или переключателям, например
<input type="checkbox" name="test" /> <label for="test">check me</label>
input:checked ~ label { font-weight: bold; }
Не существует соответствующего селектора «: unchecked», но он вам не нужен: просто создайте стиль по умолчанию, затем примените изменения, когда :checked активирован. В качестве альтернативы вы можете использовать :not(:checked) .
: неопределенная
:indeterminate технически еще не указан в спецификации, хотя и упоминается . Согласно спецификации, он представляет флажок или переключатель, которые «не отмечены и не отмечены».
Это необычно тем, что применяет стили, только когда вы устанавливаете свойство флажка .indeterminate через JavaScript, т.е.
document.getElementById("mycheckbox").indeterminate = true;
Он не влияет на свойство .checked , которое может быть только истинным или ложным.
Есть несколько ситуаций, когда :indeterminate может быть полезным. Если у вас есть флажки списка, вы можете предоставить флажок «проверить все», который отмечал или снимал флажок для каждого элемента при нажатии. Однако, если вы отметите некоторые элементы, флажок «проверить все» может перейти в неопределенное состояние.
:требуется
:required применяет стили к любому входу, который имеет required атрибут и должен быть введен до отправки.
:необязательный
:optional применяет стили к любому входу, который не имеет required атрибута. Я не уверен, почему это было добавлено, так как :not(:required) сделал бы то же самое ?!
: действительный
:valid применяет стили к любому входу, который в настоящее время содержит действительные данные.
:инвалид
Аналогично :invalid (или :not(:valid) ) применяет стили к любому входу, который в настоящее время содержит недопустимые данные, например
input:invalid { border-color: #900; }
: в диапазоне (число и диапазон входов)
Числа и диапазоны, содержащие действительное значение между атрибутами min и max которые соответствуют значению step можно выбрать с помощью :in-range . Очевидно, ползунку немного сложно выйти за пределы диапазона, но…
: вне диапазона (число и диапазон ввода)
:out-of-range целевых недопустимых числовых значений для входов диапазона.
:отключен
Входы с disabled атрибутом могут быть предназначены для псевдокласса :disabled , например
input:disabled { color: #ccc; background-color: #eee; }
Помните, что отключенные поля не будут проверены или их данные будут отправлены на сервер. Однако стили для псевдоклассов, такие как :required и :invalid будут по-прежнему применяться.
: включен
Аналогично, неотключенные поля могут быть выбраны с помощью :enabled (или :not(:disabled) ). На практике вам вряд ли понадобится этот селектор, так как это стиль ввода по умолчанию.
: Только для чтения
Входы с атрибутом только для :read-only могут быть предназначены для псевдокласса :read-only . Помните, что входные данные только для чтения будут по-прежнему проверяться и публиковаться на сервере, но пользователь не может изменять значения.
:читай пиши
Стандартные поля для чтения и записи можно выбрать с помощью :read-write (или :not(:read-only) ). Опять же, это не тот селектор, который вам нужен часто.
: по умолчанию (только кнопки отправки или ввода)
Наконец, у нас есть селектор :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 предоставляет инструменты для:
- остановить проверку, пока форма не будет использована
- использовать пользовательские сообщения об ошибках
- полифилл неподдерживаемые типы ввода
- обеспечить резервный стиль и проверку для старых браузеров, и
- создавать более удобные формы
Мы рассмотрим их подробнее в последней части этой серии.