MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

:in-range

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

 

Sumari

La pseudo-classe CSS :in-range coincideix quan un element té el seu atribut valor dins de les limitacions del rang especificat per aquest element. Permet la pàgina donar una retroalimentació de que el valor, definit actualment, és usat per l'element dins dels límits del rang.

Nota: aquesta pseudo-classe només s'aplica als elements que tenen limitacions de rang. En absència d'aquesta limitació, l'element no pot està en cap de les dues 'in-range' o 'out-of-range'.

Sintaxi

:in-range { style properties }

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>
</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:' OK';
}
input:out-of-range + label::after {
    content:'out of range!';
}

Especificacions

Especificació Estat Comentari
WHATWG 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.
Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport en <input> 10.0[1] 29.0 (29.0)[2] No support 11.0[1] 5.2[3]
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport en <input> 2.3[1] 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.

Veure

Document Tags and Contributors

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