:in-range

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

css
/* 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

Error: could not find syntax for this item

Ejemplo

HTML

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

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

Specification
HTML
# selector-in-range
Selectors Level 4
# in-range-pseudo

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:in-range

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Ver también