Ці :optionalзавдання класу псевдо входи ( в тому числі с), які спеціально не встановлені як required(не мають requiredатрибута).
Це може бути корисно, коли ви хочете надати необов’язковим полям певний вигляд, можливо, трохи менш помітний, ніж потрібні.
Синтаксис
input(type=text):optional ( border: 1px solid #eee; )Демо
У наступній демонстраційній демонстрації, необов’язкові поля (“Ім’я”, “Стать” та “Континент”) непрозорість зменшено до 40%, щоб користувачі могли одразу знати, які поля обов’язкові. У цьому випадку "Електронна пошта". При наведенні курсору миші на необов’язковому вводі спостерігається повернення непрозорості до 100%.
В optionalроботи по всім типам елементів форми: текстові входи всіх типів, радіо - кнопки, прапорці, і вибирає.
Примітка. Ви не можете знати лише з CSS, що мітка пов'язана з необов'язковим полем, якщо тільки мітка не вводиться після введення (і ви використовуєте комбінатор братів або сестер), що рідко і зазвичай не є гарною ідеєю. Можливо, у майбутньому батьківські селектори можуть допомогти в цьому.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Будь-який | 5+ |
Зверніть увагу, що :optionalце не точний протилежний, :not(:required)оскільки останній буде відповідати всім типам елементів, тоді :optionalяк обмежений елементами форми.