: neplatný - Triky CSS

Anonim

:invalidVolič umožňuje vybrat prvky, které neobsahují platný obsah, jak je stanoveno jeho typeatributem. :invalidje definován ve specifikaci CSS Selectors Level 3 jako „pseudoselektor platnosti“, což znamená, že se používá ke stylu interaktivních prvků na základě vyhodnocení vstupu uživatele.

Tento selektor má jedno konkrétní použití: poskytnout uživateli zpětnou vazbu při interakci s formulářem na stránce. Následující příklad používá CSS k přepnutí polí „E-mail“ na červenou nebo zelenou, v reakci na to, zda se obsah shoduje s platným vzorem e-mailové adresy či nikoli:

Podívejte se na toto pero!

Všimněte si, jak je první („e-mail“) platný zeleně, i když v poli není žádný obsah. Důvodem je, že vstup je volitelný, takže jeho ponechání prázdné by mělo za následek platné odeslání formuláře. Chcete-li toto chování opravit, má druhý atribut „required“, což znamená, že prázdné pole by mělo za následek neplatné odeslání formuláře.

Body zájmu

  • :invalidlze „zřetězit“ s jinými pseudo-selektory: rád :focusověřuje pouze při psaní uživatelem, :beforenebo :aftergeneruje ikony nebo text, aby poskytl více zpětné vazby od uživatelů, nebo selektory atributů rád input(value="")ověřuje pouze vstupní pole obsahující obsah.

Podpora prohlížeče

Chrome Safari Firefox Opera TJ Android iOS
10,0+ 5,0+ 4,0+ 10,0+ 10+ ani náhodou ani náhodou

:invalidbyl představen v modulu CSS Selectors Module 3, což znamená, že staré verze prohlížečů jej nepodporují. Podpora moderních prohlížečů se však zlepšuje. Pokud požadujete podporu starších prohlížečů, buď polyfill, nebo použijte tyto selektory nekritickými způsoby á la progresivní vylepšení, které se doporučuje.