: gebruiker-ongeldig - CSS-trucs

Het :user-invalidis een CSS-pseudo-klasse die wordt voorgesteld in het werkconcept van CSS Selectors Level 4 dat een formulierelement selecteert op basis van of de waarde, zoals ingevoerd door een gebruiker, geldig is wanneer deze wordt vergeleken met wat is opgegeven als een geaccepteerde waarde in de HTML-opmaak nadat de eindgebruiker interactie heeft gehad met het formulier buiten die invoer. In feite :user-invalidwordt het "De gebruikersinteractie pseudoklasse" genoemd omdat het uniek is in het identificeren van een gebruikersactie bij het selecteren van een element.

Gebruik de volgende HTML-opmaak voor een basisformulier met een numeriek veld:

Hoeveelheid:

Het numerieke bereik dat wordt ingesteld door de HTML-opmaak voor de invoer ligt tussen 1en, 10maar de standaardwaarde is ingesteld op 11. Dat betekent dat de waarde ongeldig is zodra het formulier wordt geladen.

De :user-invalidpseudoklasse wordt echter pas van kracht nadat de gebruiker daadwerkelijk met het formulier heeft gewerkt, nadat het in het veld is ingevoerd. Die interactie is het verschil tussen :user-invaliden :invalid. Hetzelfde principe is van toepassing op ingevulde formulierwaarden die zijn ingesteld door :in-range, :out-of-rangeen :required.

Zodra de waarde die de gebruiker heeft ingevoerd is vastgesteld als ongeldig, kunnen we het element selecteren:

input:user-invalid ( color: red; )

De volgende afbeelding illustreert de verschillende staten tussen :validen op :user-invalidbasis van het HTML-voorbeeld hierboven.

Het verschil tussen een geldige waarde (links) en een ongeldige waarde ingevoerd door een gebruiker na interactie met het formulier.

Het verwarrende hier is hoe nauw verwant :invaliden :user-invalidzijn. Als ze samen worden gebruikt, kan het moeilijk zijn om de twee te onderscheiden:

input:invalid ( color: red; ) input:user-invalid ( color: red; )

Het verschil tussen `:invalid`(midden) en een ongeldige waarde ingevoerd door een gebruiker (rechts) kan moeilijk te onderscheiden zijn

Het gebruik van de ene boven de andere of het hebben van een verschillende stijl tussen de twee kan een betere gebruikerservaring blijken te zijn in een real-life use-case.