:out-of-range

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.
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)

Vegeu també