На :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е ограничено до елементите на формуляра.