: user-invalid - CSS-trükkök

Anonim

Az :user-invalida CSS álosztály, amely a CSS Selectors 4. szintű munkadokumentumának javaslata alatt áll, és kiválaszt egy űrlapelemet annak alapján, hogy a felhasználó által megadott érték érvényes-e, ha összehasonlítjuk azzal, amit a a HTML jelölés, miután a végfelhasználó interakcióba lépett az űrlappal az adott bemeneten túl. Valójában :user-invalid„A felhasználói interakció ál-osztályának” hívták, mert egyedülálló a felhasználói művelet azonosításában egy elem kiválasztásakor.

Vegyük a következő HTML jelölést egy numerikus mezővel rendelkező alaplapra:

Mennyiség:

A bemeneti HTML-jelöléssel beállított számtartomány között van 1, 10de az alapértelmezett értéket beállította 11. Ez azt jelenti, hogy az érték érvénytelen, amint az űrlap betöltődik.

Az :user-invalidál-osztály azonban csak akkor lép életbe, ha a felhasználó ténylegesen kölcsönhatásba lépett az űrlappal, miután beírta azt a mezőbe. Ez a kölcsönhatás a különbség a :user-invalidés között :invalid. Ugyanez az elv érvényes a beírt űrlapértékekre, amelyeket a :in-range, :out-of-rangeés :required.

Miután a felhasználó által megadott érték érvénytelen bejegyzésnek bizonyult, kiválaszthatjuk az elemet:

input:user-invalid ( color: red; )

Az alábbi kép illusztrálja a különböző államok között :valid, és :user-invalidalapja a HTML fenti példában.

A különbség egy érvényes érték (bal) és egy érvénytelen érték között, amelyet a felhasználó az űrlappal való interakció után adott meg.

A zavaró dolog itt van, hogy szorosan összefügg :invalid, és :user-invalidvannak. Ha együtt alkalmazzák, nehéz lehet megkülönböztetni a kettőt:

input:invalid ( color: red; ) input:user-invalid ( color: red; )
A :invalid(közép) és a felhasználó által beírt érvénytelen érték (jobb) közötti különbséget nehéz megkülönböztetni

Az egyik használata a másik felett, vagy a kettő közötti különféle stílus kialakítása jobb felhasználói élménynek bizonyulhat a való életben.

Böngésző támogatás

:user-invalid jelenleg nem támogatott, de a CSS Selectors 4. szintű munkadokumentumában javasolt.

A Firefox egy előtagolt, nem szabványos tulajdonságot használ -moz-ui-invalid, amely hasonló szabványokat alkalmaz.

Összefüggő

  • :invalid
  • :valid

Több információ

  • CSS szelektorok 4. szintű specifikáció
  • MDN specifikáció :-moz-ui-invalid