Qual è la differenza tra: out-of-range e: invalid?

Question

Esempio

input[type="number"] { 
    background: white; 
    color: black; 
} 
input[type="number"]:in-range { 
    background: green; 
    color: white; 
} 
input[type="number"]:out-of-range { 
    background: red; 
    color: white; 
} 

<input c type="number" min="1" max="100"> 

Qual è la differenza tra :out-of-range e :invalid?

Answer 1

Il selettore seleziona :out-of-range elementi che hanno un valore che è fuori del set min e max valori dell'ingresso

<input type="number" min="5" max="10" value="17"> <!-- Gets selected with :out-of-range --> 
<input type="number" min="5" max="10" value="8"> <!-- Does not get selected with :out-of-range --> 

Il selettore :invalid seleziona gli elementi che non sono validi in base al tipo di ingresso è.

<input type="email" value="abc@gmail.com"> <!-- Is a valid e-mail address and does not get selected with :invalid --> 
<input type="email" value="foo"> <!-- Is not a valid e-mail address and gets selected with :invalid --> 

JSFiddle

Answer 2

E 'semplice, ma ricordate che alcuni browser non supporta queste funzionalità.

: out-of-range

<input type="date" name="dateCheck" min="2000-01-01" max="2016-07-06"> 
<!-- in this case if you enter date after 2016-07-06 input:out-of-range will match --> 

L': fuori gamma selettore seleziona tutti gli elementi con un valore al di fuori di un intervallo specificato.

Nota: il selettore di fuori campo funziona solo per elementi con limiti di intervallo, ad esempio elementi di input con attributi min e max.

Suggerimento: utilizzare il selettore: in-range per selezionare tutti gli elementi con un valore compreso in un intervallo specificato.

fonte: http://www.w3schools.com/cssref/sel_out-of-range.asp

: in-gamma è anche invertito versione di : out-of-range

: non valida

<input type="date" name="dateCheckInvalid" min="2016-07-06"> 
<!-- in this case if u enter date before 2016-07-06 input:invalid will match --> 

Il : selettore non valido s eletti formano elementi con un valore che non convalida in base alle impostazioni dell'elemento.

Nota: L': selettore non valido funziona solo per gli elementi del modulo con limitazioni, come elementi di input con min e max attributi, i campi di posta elettronica senza un'email legale, o campi numero senza un valore numerico, ecc

Tip : Usa il: selector valido per selezionare gli elementi del modulo con un valore che si convalida in base alle impostazioni dell'elemento.

fonte: http://www.w3schools.com/cssref/sel_invalid.asp

Vedere semplice demo: https://jsfiddle.net/bytdubk4/

Answer 3

Il selettore out-of-range applica lo stile specificato solo se il valore dell'elemento di input è "fuori linea".Il selettore fuori intervallo funziona solo per elementi con limiti di intervallo, come elementi di input con attributi min e max.

Ad esempio: il numero massimo di caratteri che possono essere immessi in un campo di input è 50. Ma quando l'utente tenta di entrare in più, il campo di input può cambiare colore a seconda dello stile specificato qui (come un evidenziatore rosso o così).

Il selettore non valido applica lo stile specificato solo se il valore dell'elemento di input è "non valido". Funziona solo per gli elementi del modulo con limitazioni, come elementi di input con attributi min e max, campi di posta elettronica senza email legale, o campi numerici senza valore numerico, ecc. Quindi, quando il valore di input immesso dall'utente viene visualizzato come falso o non valido, lo stile specificato viene applicato al campo di input.

Ad esempio: Quando un'email di input viene rilevata non valida, il campo di immissione può essere disabilitato mentre all'utente viene visualizzata una notifica/istruzione.