:in-range

 

Resumen

La pseudo-clase de CSS :in-range coincide cuando un elemento tiene su atributo de valor dentro de las limitaciones de rango de este elemento. Permite que la página notifique cuando el valor definido para un elemento esté dentro de sus límites de rango.

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

Sintaxis

:in-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 a 10" min="1" max="10" value="12">
            <label for="value1">El 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:'out of range!';
}

Especificaciones

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

Compatibilidad de navegadores

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

[1] En Blink, :in-range inicialmente también coincidía con elementos deshabilitados y de solo lectura (véase Chromium bug 602568. Esto cambió para sólo aplicar en elementos habilitados de lectura-escritura en Chrome 52 y Opera 39.

[2] En Gecko, :in-range inicialmente también coincidía con elementos deshabilitados y de solo lectura (véase bug 1264157. Esto cambió para sólo aplicar en elementos habilitados de lectura-escritura en Gecko 50 (Firefox 50 / Thunderbird 50 / SeaMonkey 2.47).

[3] En WebKit :in-range inicialmente también coincidía con elementos deshabilitados y de solo lectura (véase WebKit bug 156530. Esto cambió para sólo aplicar en elementos habilitados de lectura-escritura en versiones actuales de WebKit.

Véase también

Etiquetas y colaboradores del documento

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