English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il pseudo-classe CSS :out-of-range indica un elemento <input> il cui valore corrente si trova al di fuori dell'intervallo definito dagli attributi min e max. Attenzione: questo pseudo-classe si applica solo agli elementi che hanno (o possono accettare) una configurazione di intervallo di valori. Se manca questa configurazione, il valore dell'elemento non ha senso in termini di 'in-range' e 'out-range'.
Manuale completo delle scelte CSS
Imposta lo stile specificato quando il valore inserito si trova al di fuori dell'intervallo specificato:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lezioni di base (oldtoolbag.com)</title>
<style>
input:out-of-range
{
border:2px solid blue;
}
</style>
</head>
<body>
<h3>Esempio di selettore :out-of-range.</h3>
<input type="number" min="8" max="18" value="20" />
<p>Inserisci un valore nell'input (minore di 8 o maggiore di 18), e guarda le modifiche allo stile.</p>
</body>
</html>Prova a vedere ‹/›Il selettore :out-of-range viene utilizzato per definire lo stile visualizzato quando il valore del tag si trova al di fuori dell'intervallo specificato.
Attenzione: Il selettore :out-of-range agisce solo sugli elementi che possono specificare valori al di fuori dell'intervallo, ad esempio gli attributi min e max degli elementi input.
I numeri nella tabella rappresentano la versione del primo browser che supporta l'attributo.
| Selettore | |||||
|---|---|---|---|---|---|
| :out-of-range | 10.0 | Non supportato | 28.0 | 5.2 | 11.0 |
/* Il pseudo-classe può selezionare qualsiasi <input>, ma è efficace solo se l'elemento specifica un intervallo di valori e il valore dell'elemento si trova all'interno di tale intervallo */
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
}Questo pseudo-classe viene utilizzato per fornire un suggerimento visivo all'utente, indicando che il valore corrente dell'area di input si trova al di fuori dell'intervallo permesso.
Selettore CSS :in-range