: nederīgs - CSS-triki

Anonim

:invalidSelektors ļauj jums izvēlēties elementus, kas nesatur derīgu saturu, kā noteikts tās typeatribūtu. :invalidCSS selektoru 3. līmeņa specifikācijā ir definēts kā “derīguma pseido-selektors”, kas nozīmē, ka to izmanto interaktīvu elementu veidošanai, pamatojoties uz lietotāja ievadīto informāciju.

Šim atlasītājam ir viens īpašs lietojums: sniegt atgriezenisko saiti lietotājam, kamēr viņi mijiedarbojas ar lapā esošo veidlapu. Tālāk sniegtajā piemērā CSS tiek izmantots, lai laukus “E-pasts” padarītu sarkanu vai zaļu, reaģējot uz to, vai saturs atbilst derīgam e-pasta adreses veidam:

Pārbaudiet šo pildspalvu!

Ievērojiet, kā pirmais (“E-pasts”) ir derīgs zaļā krāsā, pat ja laukā nav satura. Tas ir tāpēc, ka ievade nav obligāta, tāpēc, atstājot to tukšu, tiks iesniegta derīga veidlapa. Lai novērstu šo darbību, otrajam ir atribūts “obligāts”, kas nozīmē, ka tukša lauka rezultātā veidlapa tiks iesniegta nederīgi.

Apskates vietas

  • :invalidvar būt “pieķēdēts” ar citiem pseido-atlasītājiem: patīk :focusapstiprināt tikai tad, kad lietotājs raksta, :beforevai :afterģenerēt ikonas vai tekstu, lai sniegtu vairāk lietotāju atsauksmes, vai atribūtu atlasītājiem patīk input(value="")apstiprināt tikai ievades laukus, kuros ir saturs.

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
10.0+ 5.0+ 4.0+ 10.0+ 10+

:invalidtika ieviests CSS selektoru 3. modulī, kas nozīmē, ka vecās pārlūkprogrammu versijas to neatbalsta. Tomēr mūsdienu pārlūka atbalsts kļūst arvien labāks. Ja jums ir nepieciešams vecāks pārlūka atbalsts, vai nu veiciet aizpildīšanu, vai arī izmantojiet šos atlasītājus nekritiskos veidos, ieteicams progresīvā uzlabošanā.