CSS :out-of-range Pseudo Classe
La pseudo-classe CSS :out-of-range seleziona elementi con un valore fuori dai limiti specificati dagli attributi min e max. Esempi pratici inclusi.
La pseudo-classe CSS :out-of-range corrisponde a un campo di input il cui valore corrente è al di fuori dell'intervallo consentito definito dai suoi attributi min e/o max. Consente di fornire all'utente un feedback visivo immediato — un bordo rosso, un colore di avviso, un messaggio suggerimento — nel momento in cui digita un numero troppo basso o troppo alto, senza alcun JavaScript.
Questa pagina spiega esattamente a quali elementi si applica :out-of-range, come differisce da :in-range e :invalid, e mostra esempi eseguibili che puoi copiare.
:out-of-range corrisponde solo agli elementi <input> che hanno un attributo min e/o max e supportano i vincoli di intervallo — ovvero type="number", type="range" e i tipi data/ora (date, month, week, time, datetime-local). Su qualsiasi altro input non corrisponde mai.
Quando la pseudo-classe corrisponde
Un input è "fuori intervallo" quando tutte le seguenti condizioni sono vere:
- Ha un attributo
mine/omax. - Contiene attualmente un valore che il browser riesce ad analizzare.
- Quel valore è inferiore a
mino maggiore dimax.
Alcune conseguenze da tenere a mente:
- Gli input vuoti non corrispondono mai. Senza alcun valore non c'è nulla da confrontare, quindi
:out-of-rangeèfalse(e anche:in-rangeèfalse). - Riguarda esclusivamente l'intervallo numerico/data. Una mancata corrispondenza con
step(ad esempio1.5quandostep="1") rende l'input:invalid, ma non lo rende:out-of-range. - La pseudo-classe si aggiorna in tempo reale mentre l'utente modifica il campo, quindi gli stili cambiano istantaneamente.
Versione
Sintassi
:out-of-range {
/* css declarations */
}Nella quasi totalità dei casi la si abbina al tipo di input per maggiore chiarezza:
input:out-of-range {
border: 3px solid #d9534f;
}Esempio del selettore :out-of-range
L'input sottostante accetta mesi da 1 a 12, ma inizia con 15, quindi il bordo viene evidenziato al caricamento. Cambia il valore a qualcosa compreso tra 1 e 12 e l'evidenziazione scompare.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:out-of-range {
border: 3px solid #8ebf42;
}
</style>
</head>
<body>
<h2>:out-of-range selector example</h2>
<form>
<input type="number" min="1" max="12" value="15" />
</form>
</body>
</html>Abbinare :out-of-range con :in-range
:out-of-range e :in-range sono opposti: al massimo uno di loro corrisponde alla volta, e nessuno dei due corrisponde a un input vuoto. Applicare stili a entrambi permette di creare un'interfaccia completa "valore valido / valore non valido":
<!DOCTYPE html>
<html>
<head>
<title>In-range and out-of-range</title>
<style>
input:in-range {
border: 2px solid #2e8b57;
}
input:out-of-range {
border: 2px solid #d9534f;
background-color: #fde9e9;
}
</style>
</head>
<body>
<label>Pick a quantity (1–10):</label>
<input type="number" min="1" max="10" value="25" />
</body>
</html>:out-of-range vs :invalid
Questi due selettori vengono spesso confusi. :invalid è la regola più ampia — corrisponde a qualsiasi vincolo non soddisfatto, incluso un valore required mancante, un'email malformata o una mancata corrispondenza con step. :out-of-range è più specifico: si attiva solo per un valore inferiore a min o superiore a max.
Un valore fuori intervallo è anche non valido, quindi :invalid corrisponderà anch'esso. Usa :out-of-range quando vuoi comunicare specificamente all'utente "quel numero è troppo grande/piccolo" invece di un errore generico. Vedi :invalid e :valid per le pseudo-classi di validazione più ampie.
:out-of-range applica stili al campo ma non impedisce da solo l'invio del modulo. Combinalo con la validazione integrata del browser (il browser blocca l'invio di un valore fuori intervallo quando sono impostati min/max) o con controlli lato server. Non affidarti mai al solo CSS per l'integrità dei dati.
Pseudo-classi correlate
:in-range— il contrario di questo selettore.:valide:invalid— corrispondono alla validità complessiva del controllo del modulo.:requirede:optional— corrispondono in base all'attributorequired.