:out-of-range

 

Resumen

La pseudo-clase de CSS :out-of-range coincide cuando un elemento tiene su atributo de valor fuera de las limitaciones específicas de rango para dicho elemento. Esto permite a la página informar cuando el valor definido para el elemento está fuera de sus límites de rango. Un valor puede salir del rango cuando está por debajo o por encima de los límites establecidos como valor mínimo y máximo.

Nota: esta pseudo-clase solo aplica a elementos que tienen limitaciones de rango. En ausencia de esas limitaciones, el elemento no puede estar 'dentro de rango' (in-range) ni 'fuera de rango' (out-of-range).

Sintaxis

:out-of-range { style properties }

Ejemplo

HTML

<form action="" id="form1">
    <ul>Valores entre 1 y 10 son válidos.
        <li>
            <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
            <label for="value1">Tu valor es </label>
        </li>
</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:' OK';
}
input:out-of-range + label::after {
    content:'fuera de rango!';
}
 

Especificaciones

Especificación Estatus Comentarios
WHATWG HTML Living Standard
The definition of ':out-of-range' in that specification.
Living Standard Define cuándo coincide :out-of-range con elementos en HTML.
Selectors Level 4
The definition of ':out-of-range' in that specification.
Working Draft Definición inicial

Compatibilidad de navegadores

Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Soporte en <input> 10.0 (Yes) 29.0 (29.0) No support 11.0 5.2
Característica Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte en <input> 2.3 (Yes) 16.0 (16.0) No support (Yes) (Yes)

Véase también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz
 Última actualización por: israel-munoz,