:out-of-range

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨noviembre de 2015⁩.

La pseudo-clase :out-of-range de CSS representa un elemento <input> cuyo valor actual está fuera de los límites de rango especificados por los atributos min y max.

css

/* Selecciona cualquier <input>, pero solo cuando tiene un
 rango especificado, y su valor está fuera de ese rango */
input:out-of-range {
 background-color: rgba(255, 0, 0, 0.25);
}

Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está fuera de los límites permitidos.

Nota: Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".

<form action="" id="form1">
 <ul>
 Los valores entre 1 y 10 son válidos.
 <li>
 <input
 id="value1"
 name="value1"
 type="number"
 placeholder="1 a 10"
 min="1"
 max="10"
 value="12" />
 <label for="value1">Tu valor esta </label>
 </li>
 </ul>
</form>

CSS

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: "bien.";
}
input:out-of-range + label::after {
 content: "¡fuera de rango!";
}