See :user-invalidon CSS-i pseudoklass, mis on CSS-i valijate 4. tasandi tööprojekti ettepanekus ja valib vormielemendi selle põhjal, kas kasutaja sisestatud väärtus on kehtiv, kui seda võrreldakse väärtusega, mis on määratud aktsepteeritud väärtusena HTML-i märgistus pärast seda, kui lõppkasutaja on selle sisendist väljaspool oleva vormiga suhelnud. Tegelikult :user-invalidon seda nimetatud kasutajate interaktsiooni pseudoklassiks, kuna see on elemendi valimisel kasutaja toimingu tuvastamisel ainulaadne.
Numbriväljaga põhivormi jaoks tehke järgmine HTML-i märgistus:
Sisendi HTML-märgistusega määratud numbriline vahemik on vahemikus 1kuni, 10kuid vaikeväärtuseks on määratud 11. See tähendab, et väärtus on kehtetu kohe, kui vorm laaditakse.
Kuid :user-invalidpseudoklass jõustub alles pärast seda, kui kasutaja on vormiga reaalselt suhelnud, peale selle väljale sisestamist. See vastasmõju on erinevus :user-invalidja :invalid. Sama põhimõte kehtib ka sisestatud kujul väärtusi, mis määrab :in-range, :out-of-rangeja :required.
Kui kasutaja sisestatud väärtus on vale kirje, saame elemendi valida:
input:user-invalid ( color: red; )Järgneval pildil on kujutatud erinevate riikide vahel :validning :user-invalidpõhineb HTML näiteks eespool.
Segane on siin see, kui tihedalt seotud :invalidja omavahel seotud :user-invalidon. Koos kasutades võib olla raske neid kahte eristada:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(keskel) ja kasutaja sisestatud kehtetu väärtuse (paremal) vahel võib olla raske eristada
Üksteise kasutamine või nende kahe stiilide eristamine võib osutuda paremaks kasutuskogemuseks reaalses elus.
Brauseri tugi
:user-invalid ei toetata praegu, kuid see on välja pakutud CSS-i valijate 4. taseme tööprojektis.
Firefox kasutab eesliidetud mittestandardset atribuuti, -moz-ui-invalidmis võtab kasutusele sarnased standardid.
Seotud
:invalid:valid
Rohkem informatsiooni
- CSS-i selektorite 4. taseme spetsifikatsioon
- MDN spetsifikatsioon
:-moz-ui-invalid