La pseudo-clase :in-range de CSS representa un elemento <input> cuyo valor actual se encuentra dentro de los límites de rango especificados por los atributos min y max.

/* Selecciona cualquier <input>, pero solo cuando tiene un rango 
   especificado, y su valor está dentro de ese rango */
input:in-range {
  background-color: rgba(0, 255, 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á dentro 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".

Sintaxis

:in-range

Ejemplo

HTML

<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

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!';
}

Resultado

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de ':in-range' en esta especificación.
Living Standard Define cuándo :in-range coincide con elementos en HTML.
Selectors Level 4
La definición de ':in-range' en esta especificación.
Working Draft Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 10
Notas
Soporte completo 10
Notas
Notas Before Chrome 52, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In Chrome 52, it was changed to only match enabled read-write inputs.
Edge Soporte completo SiFirefox Soporte completo 29
Notas
Soporte completo 29
Notas
Notas Before Firefox 50, :in-range matched disabled and read-only inputs (see bug 1264157). In Firefox 50, it was changed to only match enabled read-write inputs.
IE Sin soporte NoOpera Soporte completo 11
Notas
Soporte completo 11
Notas
Notas Before Opera 39, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In Opera 39, it was changed to only match enabled read-write inputs.
Safari Soporte completo Si
Notas
Soporte completo Si
Notas
Notas In Safari, :in-range matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.
WebView Android Soporte completo 2.3
Notas
Soporte completo 2.3
Notas
Notas Before version 52, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In version 52, it was changed to only match enabled read-write inputs.
Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 16Opera Android Soporte completo Si
Notas
Soporte completo Si
Notas
Notas Before Opera 39, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In Opera 39, it was changed to only match enabled read-write inputs.
Safari iOS Soporte completo Si
Notas
Soporte completo Si
Notas
Notas In Safari, :in-range matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.
Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
Ver notas de implementación.
Ver notas de implementación.

Ver también

Etiquetas y colaboradores del documento

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