This translation is incomplete. Please help translate this article from English.

La pseudo-class CSS :in-range representa un element <input> en què el seu valor actual està dins dels límits de rang especificats pels atributs min i max.

/* Selecciona qualsevol <input>, però només quan té un rang especificat, i el seu valor està dins d'aquest rang */
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

Aquesta pseudo-class és útil per donar a l'usuari una indicació visual que el valor actual, d'un camp, està dins dels límits permesos.

Nota Aquesta pseudo-class només s'aplica als elements que tenen (i poden tenir) una limitació de rang. Mancant tal limitació, l'element no pot estar "en rang" ni "fora de rang".

Sintaxi

:in-range

Exemple

HTML

<form action="" id="form1">
  <ul>Values between 1 and 10 are valid.
    <li>
      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
      <label for="value1">Your value is </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: 'okay.';
}

input:out-of-range + label::after {
  content: 'out of range!';
}

Resultat

Especificacions

Especificació Estat Comentari
HTML Living Standard
The definition of ':in-range' in that specification.
Living Standard Defineix quan :in-range coincideix en elements HTML.
Selectors Level 4
The definition of ':in-range' in that specification.
Working Draft Definició inicial.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport en <input> 10.0[1] (Yes) 29.0 (29.0)[2] No support 11.0[1] 5.2[3]
Descripció Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport en <input> 2.3[1] (Yes) 16.0 (16.0)[2] No support (Yes)[1] (Yes)[3]

[1] En Blink :in-range, inicialment, també coincidien amb les entrades deshabilitades i de només lectura (veure Chromium errada 602568. Això es va canviar per aplicar només a les entrades de lectura i escriptura habilitades en Chrome 52 i Opera 39.

[2] En Gecko :in-range inicialment, també coincidien amb les entrades deshabilitades i de només lectura (veure errada 1264157. Això es va canviar per aplicar només a les entrades de lectura i escriptura habilitades en Gecko 50 (Firefox 50 / Thunderbird 50 / SeaMonkey 2.47).

[3] En WebKit :in-range inicialment, també coincidien amb les entrades deshabilitades i de només lectura (veure WebKit errada 156530. Això es va canviar per aplicar només a les entrades de lectura i escriptura habilitades en l'actual versió de WebKit.

Vegeu també

Document Tags and Contributors

Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,