: érvénytelen - CSS-trükkök

Anonim

A :invalidválasztó lehetővé teszi olyan elemek kiválasztását , amelyek az typeattribútuma alapján nem tartalmaznak érvényes tartalmat . :invalidA CSS Selectors 3. szintű specifikációja „érvényességi álválasztó” -ként van meghatározva, vagyis interaktív elemek stílusához használják a felhasználói input értékelése alapján.

Ennek a választónak egy meghatározott célja van: visszajelzést ad a felhasználónak, miközben az oldalon lévő űrlappal interakcióba lép. Az alábbi példa CSS-t használ az „E-mail” mezők pirosra vagy zöldre váltására, reagálva arra, hogy a tartalom megfelel-e érvényes e-mail mintának:

Nézze meg ezt a tollat!

Vegye figyelembe, hogy az első („E-mail”) zöld-érvényes, még akkor is, ha a mezőben nincs tartalom. Ez azért van, mert a bemenet nem kötelező, így üresen hagyva érvényes űrlapbeküldést eredményez. A viselkedés kijavításához a második rendelkezik egy „kötelező” attribútummal, ami azt jelenti, hogy egy üres mező érvénytelen űrlap beküldést eredményez.

Látványosság

  • :invalid„láncolható” más álszelektorokkal: :focuscsak akkor érvényesíteni, amikor a felhasználó gépel, :beforevagy :afterikonokat vagy szöveget generálni, hogy több felhasználói visszajelzést adjanak, vagy az attribútumválasztók input(value="")csak a tartalmat tartalmazó beviteli mezőket érvényesíteni.

Böngésző támogatás

Króm Szafari Firefox Opera AZAZ Android iOS
10.0+ 5.0+ 4.0+ 10.0+ 10+ Dehogy Dehogy

:invalida CSS Selectors 3. moduljában vezették be, ami azt jelenti, hogy a böngészők régi verziói nem támogatják. A modern böngészőtámogatás azonban egyre jobb. Ha régebbi böngészőtámogatásra van szüksége, vagy töltse ki a polifillet, vagy használja ezeket a választókat nem kritikus módon, ezért ajánlott a progresszív fejlesztés.