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