Il :user-invalidè un CSS pseudo-classe che si trova sotto proposta nel CSS selettori Livello progetto 4 di lavoro che seleziona un elemento del modulo a seconda che il valore-immessi da un utente è valida quando controllato contro il quale viene specificato come valore accettato in il markup HTML dopo che l'utente finale ha interagito con il modulo oltre tale input. Infatti, :user-invalidè stata chiamata "The User Interaction Pseudo-class" perché è unica nell'identificare un'azione dell'utente nella selezione di un elemento.
Prendi il seguente markup HTML per un modulo di base con un campo numerico:
L'intervallo numerico impostato dal markup HTML per l'input è compreso tra 1e 10ma il valore predefinito è stato impostato su 11. Ciò significa che il valore non è valido non appena viene caricato il modulo.
Tuttavia, la :user-invalidpseudo-classe non avrà effetto finché l'utente non avrà effettivamente interagito con il modulo oltre a inserirlo nel campo. Questa interazione è la differenza tra :user-invalide :invalid. Lo stesso principio vale per i valori di modulo inserito impostati da :in-range, :out-of-rangee :required.
Una volta che il valore che l'utente ha inserito è determinato come una voce non valida, possiamo selezionare l'elemento:
input:user-invalid ( color: red; )L'immagine seguente illustra i diversi stati tra :valide in :user-invalidbase all'esempio HTML precedente.
La cosa che crea confusione qui è quanto sono strettamente correlati :invalide :user-invalidsono. Se usati insieme, potrebbe essere difficile distinguere i due:
input:invalid ( color: red; ) input:user-invalid ( color: red; )
:invalid(centro) e un valore non valido immesso da un utente (a destra) può essere difficile da distinguere
Usare l'uno sull'altro o avere uno stile distinto tra i due potrebbe rivelarsi una migliore esperienza utente in un caso d'uso nella vita reale.
Supporto browser
:user-invalid non è attualmente supportato ma è proposto nella bozza di lavoro Selettori CSS Livello 4.
Firefox utilizza una proprietà non standard con prefisso -moz-ui-invalidche adotta standard simili.
Relazionato
:invalid:valid
Maggiori informazioni
- Specifica di livello 4 dei selettori CSS
- Specifica MDN per
:-moz-ui-invalid