: nije obavezno - CSS-trikovi

Anonim

U :optionalpseudo klasa cilja ulaza (uključujući e) koji nisu posebno navedeni kao required(nemaju requiredatribut).

To može biti korisno kada neobaveznim poljima želite dati specifičan izgled, možda nešto manje vidljiv od potrebnih.

Sintaksa

input(type=text):optional ( border: 1px solid #eee; )

Demo

U sljedećem pokaznom prikazu, izbornom polju („Ime“, „Spol“ i „Kontinent“) neprozirnost je smanjena na 40%, tako da korisnici mogu odmah znati koja su potrebna polja. U ovom slučaju, "E-pošta". Kada zadržite pokazivač, neobavezni ulaz vidjet će da se neprozirnost vraća na 100%.

U optionalRadovi na sve vrste obrazaca elementi: tekst ulaza svih vrsta, radio gumbi, kućice i bira.

Pogledajte ovu olovku!

Napomena: s CSS-om ne možete znati samo da je oznaka povezana s neobaveznim poljem, osim ako oznaka dolazi nakon unosa (a koristite kombinaciju braće i sestara), što je rijetko i obično nije dobra ideja. Možda u budućnosti roditelji s odabirom mogu pomoći u tome.

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
10+ 5+ 4+ 10+ 10+ Bilo koji 5+

Imajte na umu da :optionalto nije točno suprotno od :not(:required)toga jer će se potonji podudarati sa svim vrstama elemenata dok :optionalje ograničen na elemente obrasca.