De :optionalmål pseudo klass ingångar (inklusive s) som inte uttryckligen anges som required(inte har requiredattribut).
Detta kan vara användbart när du vill ge valfria fält ett specifikt utseende, kanske lite mindre synliga än de som krävs.
Syntax
input(type=text):optional ( border: 1px solid #eee; )Demo
I följande demo har valfritt fält ("Namn", "Kön" och "Kontinent") sin opacitet sänkt till 40% så att användare omedelbart kan veta vilka fält som krävs. I det här fallet “E-post”. När du svävar kommer en valfri inmatning att se opaciteten gå tillbaka till 100%.
De optionalfungerar på alla typer av formulärelement: text ingångar av alla slag, alternativknappar, kryssrutor och väljer.
Obs! Du kan inte bara med CSS veta att en etikett är associerad med ett valfritt fält, såvida inte etiketten kommer efter inmatningen (och du använder en syskonkombinator), vilket är sällsynt och vanligtvis inte en bra idé. I framtiden kanske föräldrarnas väljare kan hjälpa till med detta.
Webbläsarstöd
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Några | 5+ |
Observera att det :optionalinte är den exakta motsatsen till :not(:required)eftersom den senare kommer att matcha alla typer av element medan den :optionalär begränsad till formelementen.