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.

/* 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".

Sintaxis

:out-of-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 ':out-of-range' en esta especificación.
Living Standard Define cuándo :out-of-range coincide con los elementos en HTML.
Selectors Level 4
La definición de ':out-of-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 10Edge Soporte completo SiFirefox Soporte completo 29IE Sin soporte NoOpera Soporte completo 11Safari Soporte completo SiWebView Android Soporte completo 2.3Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 16Opera Android Soporte completo SiSafari iOS Soporte completo SiSamsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown

Ver también

Etiquetas y colaboradores del documento

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