CSS :in-range Pseudo Classe
La pseudo-classe CSS :in-range seleziona elementi con valore compreso nei limiti definiti dagli attributi min e max. Esempi pratici inclusi.
La pseudo-classe CSS :in-range corrisponde a un elemento <input> il cui valore corrente è all'interno dell'intervallo definito dagli attributi min e max. Consente di stilizzare un campo in modo diverso mentre il valore inserito dall'utente è ancora valido, fornendo un feedback visivo immediato senza una sola riga di JavaScript.
Questa pagina illustra quando si applica :in-range, i tipi di input con cui funziona, esempi pratici di stilizzazione e come si relaziona alle pseudo-classi di validazione con cui si abbina.
Quando si applica il selettore
:in-range è rilevante solo per i controlli di modulo che possono esprimere un intervallo. Un controllo è vincolato a un intervallo quando accetta un vincolo min e/o max. Se un controllo non ha tale vincolo, non può essere né "nell'intervallo" né fuori dall'intervallo — quindi nessuna delle due pseudo-classi corrisponderà mai.
:in-range funziona sugli elementi <input> che supportano min/max: type="number", type="range", type="date", type="month", type="week", type="time" e type="datetime-local". Un input di testo, una casella di controllo o un pulsante non sono mai nell'intervallo.
Un campo è nell'intervallo quando si verificano tutte e tre le condizioni:
- il tipo di input supporta
min/max, - almeno uno tra
minemaxè impostato, - il valore corrente è compreso tra i limiti (inclusi).
Nel momento in cui il valore supera un limite, smette di corrispondere a :in-range e inizia a corrispondere a :out-of-range. Le due pseudo-classi si escludono mutuamente, quindi si abbinano perfettamente per una stilizzazione "valido vs. non valido".
Sintassi
:in-range {
/* style declarations */
}In pratica si qualifica quasi sempre con input (o un selettore più specifico) in modo da prendere di mira solo i controlli desiderati:
input:in-range {
border-color: green;
}Stilizzare un input nell'intervallo
L'esempio seguente delinea un campo numerico finché il suo valore rimane tra 1 e 10. Prova a cambiare il valore in 0 o 15 nell'editor: lo stile del bordo scompare perché il campo non è più nell'intervallo.
<!DOCTYPE html>
<html>
<head>
<title>:in-range example</title>
<style>
input:in-range {
border: 2px solid #666;
}
</style>
</head>
<body>
<h2>:in-range selector example</h2>
<form>
<input type="number" min="1" max="10" value="5" />
</form>
</body>
</html>Abbinare in-range con out-of-range
Poiché i due stati non si sovrappongono mai, un pattern comune è stilizzare entrambi contemporaneamente: verde quando il valore è valido, rosso nel momento in cui esce dalla banda consentita.
<!DOCTYPE html>
<html>
<head>
<title>:in-range and :out-of-range</title>
<style>
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
</style>
</head>
<body>
<label>Quantity (1–10):</label>
<input type="number" min="1" max="10" value="5" />
</body>
</html>Combinare con altre pseudo-classi
:in-range può essere concatenata con altre pseudo-classi — ad esempio :hover o :focus — per affinare ulteriormente il feedback:
input:in-range:focus {
outline: 2px solid green;
}Note e avvertenze
:in-rangeriflette il valore corrente, quindi lo stile si aggiorna in tempo reale mentre l'utente digita o trascina un cursore.- Un campo vuoto con
min/maxè considerato nell'intervallo (non c'è alcun valore che violi il limite), quindi combinalo con:requiredse un valore vuoto deve essere trattato come non valido. minemaxvincolano solo la stilizzazione in questo contesto — sono comunque applicati dalle pseudo-classi di validazione native come:valide:invalidal momento dell'invio del modulo.