De :optionalpseudoklasse richt zich op invoer (inclusief s) die niet specifiek zijn ingesteld als required(hebben het requiredkenmerk niet).
Dit kan handig zijn als u optionele velden een specifiek uiterlijk wilt geven, misschien iets minder zichtbaar dan de vereiste velden.
Syntaxis
input(type=text):optional ( border: 1px solid #eee; )Demo
In de volgende demo is de dekking van optionele velden ("Naam", "Geslacht" en "Continent") verlaagd tot 40%, zodat gebruikers onmiddellijk kunnen weten wat de vereiste velden zijn. In dit geval "E-mail". Wanneer u de muisaanwijzer plaatst, ziet een optionele invoer dat de dekking teruggaat naar 100%.
Het optionalwerkt op alle soorten formulierelementen: alle soorten tekstinvoer, keuzerondjes, selectievakjes en selecties.
Opmerking: je kunt met CSS niet alleen weten dat een label is gekoppeld aan een optioneel veld, tenzij het label na de invoer komt (en je gebruikt een combinator op hetzelfde niveau), wat zeldzaam is en meestal geen goed idee. Misschien kunnen ouderselectors in de toekomst hierbij helpen.
Browser-ondersteuning
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Ieder | 5+ |
Merk op dat :optionaldit niet precies het tegenovergestelde is, :not(:required)omdat de laatste overeenkomt met alle typen elementen, terwijl het :optionalbeperkt is tot de formulierelementen.