:out-of-range

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 para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:out-of-rangeChrome Soporte completo 10Edge Soporte completo 13Firefox Soporte completo 29IE Sin soporte NoOpera Soporte completo 11Safari Soporte completo 5.1WebView Android Soporte completo 2.3Chrome Android Soporte completo 18Firefox Android Soporte completo 16Opera Android Soporte completo 11Safari iOS Soporte completo 5Samsung Internet Android Soporte completo 1.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte

Ver también