Az :optionalálosztály megcélozza azokat a bemeneteket (beleértve az s-eket is), amelyek nincsenek kifejezetten beállítva required(nincsenek requiredattribútumuk).
Ez akkor lehet hasznos, ha az opcionális mezőknek konkrét megjelenést szeretne adni, talán kissé kevésbé láthatóak, mint az előírt mezők.
Szintaxis
input(type=text):optional ( border: 1px solid #eee; )Demó
A következő bemutatóban az opcionális mező („Név”, „Nem” és „Kontinens”) átlátszatlansága 40% -ra csökken, így a felhasználók azonnal megismerhetik a kötelező mezőket. Ebben az esetben „Email”. Az egérmutatóval egy opcionális bemeneten az opacitás 100% -ra fog visszatérni.
A optionalmunkálatok minden típusú forma elemek: szövegek bemenetek minden fajta, gombok, jelölőnégyzetek, és kiválasztja.
Megjegyzés: csak a CSS-sel nem lehet tudni, hogy egy címke egy opcionális mezőhöz van társítva, kivéve, ha a címke a bemenet után következik (és testvérkombinátort használ), ami ritka és általában nem jó ötlet. Talán a jövőben a szülőválasztók segíthetnek ebben.
Böngésző támogatás
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 10+ | 5+ | 4+ | 10+ | 10+ | Bármi | 5+ |
Ne feledje, hogy :optionalez nem a pontos ellentéte, :not(:required)mert az utóbbi minden típusú elemnek megfelel, míg :optionalaz űrlapelemekre korlátozódik.