Эти :optionalзадания класса псевдо входы ( в том числе с), которые специально не установлены как required(не имеют requiredатрибута).
Это может быть полезно, если вы хотите придать необязательным полям особый вид, возможно, немного менее заметный, чем обязательные.
Синтаксис
input(type=text):optional ( border: 1px solid #eee; )Демо
В следующей демонстрации непрозрачность необязательных полей («Имя», «Пол» и «Континент») снижена до 40%, чтобы пользователи могли сразу узнать, какие поля являются обязательными. В данном случае «Электронная почта». При наведении указателя мыши на необязательный ввод будет видно, что непрозрачность возвращается к 100%.
В optionalработы по всем типам элементов формы: текстовые входы всех типов, радио - кнопки, флажки, и выбирает.
Примечание: вы не можете знать с помощью CSS только то, что метка связана с необязательным полем, если только метка не идет после ввода (и вы используете комбинатор родственного брака), что бывает редко и обычно не очень хорошая идея. Возможно, в будущем в этом помогут родительские селекторы.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Любой | 5+ |
Обратите внимание, что :optionalэто не полная противоположность, :not(:required)потому что последний будет соответствовать всем типам элементов, но :optionalограничен элементами формы.