The pseudo-class CSS :out-of-range representa un element <input> el valor actual del qual està fora dels límits de rang especificats pels atributs min i max.
/* Selecciona qualsevol <input>, però només quan té un rang especificat, i el seu valor està fora d'aquest rang */ input:out-of-range { background-color: rgba(255, 0, 0, 0.25); }
Aquesta pseudo-class és útil per proporcionar a l'usuari una indicació visual de que el valor actual d'un camp està fora dels límits permesos.
Nota: Aquesta pseudo-class només s'aplica als elements que tenen (i poden prendre) una limitació de rang. A falta d'aquesta limitació, l'element no pot ser "dins del rang" ni "fora de rang".
Sintaxi
:out-of-range
Exemple
HTML
<form action="" id="form1">
<ul>Values between 1 and 10 are valid.
<li>
<input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
<label for="value1">Your value is </label>
</li>
</ul>
</form>
CSS
li {
list-style: none;
margin-bottom: 1em;
}
input {
border: 1px solid black;
}
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
input:in-range + label::after {
content: 'okay.';
}
input:out-of-range + label::after {
content: 'out of range!';
}
Resultat
Especificacions
| Especificació | Estat | Comentari |
|---|---|---|
| HTML Living Standard The definition of ':out-of-range' in that specification. |
Living Standard | Defineix quan :out-of-range coincideix en elements HTML. |
| Selectors Level 4 The definition of ':out-of-range' in that specification. |
Working Draft | Definició inicial. |
Navegadors compatibles
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Descripció | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Suport en <input> | 10.0 | (Yes) | 29.0 (29.0) | No support | 11.0 | 5.2 |
| Descripció | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Suport en <input> | 2.3 | (Yes) | 16.0 (16.0) | No support | (Yes) | (Yes) |