: user-invalid - CSS-temppuja

Anonim

:user-invalidOn CSS pseudo-luokka, joka on alle ehdotus CSS valitsimet Taso 4 luonnoksena, joka valitsee lomakkeen perusteella niin onko arvo-kuin käyttäjän syöttämä-on voimassa, kun verrataan mitä on määritetty hyväksytyksi arvo HTML-merkintä sen jälkeen, kun loppukäyttäjä on ollut vuorovaikutuksessa lomakkeen kanssa kyseisen syötteen ulkopuolella. Itse asiassa :user-invalidsitä on kutsuttu nimellä "Käyttäjän vuorovaikutuksen näennäisluokka", koska se on ainutlaatuinen tunnistettaessa käyttäjän toiminto elementin valinnassa.

Ota seuraava HTML-merkintä peruslomakkeelle, jossa on numeerinen kenttä:

Määrä:

Syötteen HTML-merkinnän asettama numeerinen alue on välillä 1ja välillä, 10mutta oletusarvoksi on asetettu 11. Tämä tarkoittaa, että arvo on virheellinen heti, kun lomake latautuu.

Kuitenkin :user-invalidpseudo-luokka voimaan vasta, kun käyttäjä on itse asiassa vuorovaikutuksessa muodossa kuin kirjoittamalla se kenttään. Tämä vuorovaikutus on ero :user-invalidja :invalid. Sama periaate pätee merkitään muodossa arvoja, jotka on asetettu :in-range, :out-of-rangeja :required.

Kun käyttäjän kirjoittama arvo on määritetty virheelliseksi, voimme valita elementin:

input:user-invalid ( color: red; )

Seuraava kuva havainnollistaa eri tiloja välillä :validja :user-invalidperustuu yllä olevaan HTML-esimerkkiin.

Voimassa olevan arvon (vasen) ja virheellisen arvon välinen ero, jonka käyttäjä on kirjoittanut vuorovaikutuksessa lomakkeen kanssa.

Hämmentävä asia tässä on, kuinka läheisesti toisiinsa liittyvät :invalidja :user-invalidovat. Jos niitä käytetään yhdessä, voi olla vaikeaa erottaa nämä kaksi:

input:invalid ( color: red; ) input:user-invalid ( color: red; )
Ero :invalid(keskellä) ja käyttäjän kirjoittaman virheellisen arvon välillä (oikealla) voi olla vaikea erottaa

Toisten käyttäminen toistensa kanssa tai erillinen muotoilu näiden kahden välillä voi osoittautua paremmaksi käyttökokemukseksi tosielämässä.

Selaimen tuki

:user-invalid ei tällä hetkellä tueta, mutta sitä ehdotetaan CSS Selectorsin tason 4 työluonnoksessa.

Firefox käyttää etuliitettyä epätyypillistä ominaisuutta, -moz-ui-invalidjoka hyväksyy samanlaiset standardit.

Liittyvät

  • :invalid
  • :valid

Lisää tietoa

  • CSS-valitsimien tason 4 määrittely
  • MDN-määritys :-moz-ui-invalid