MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

:out-of-range

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

 

Sumari

La pseudo-classe CSS :out-of-range coincideix quan un element té el seu atribut de valor fora 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 fora dels límits del rang. Un valor pot ser fora d'un rang si és o bé menor o major que els valors màxims i mínims establerts.

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

:out-of-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 ':out-of-range' in that specification.
Living Standard Defineix quan :out-of-range coincideix en elements HTML.
Selectors Level 4
The definition of ':out-of-range' in that specification.
Working Draft Definició inicial.
Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport en <input> 10.0 29.0 (29.0) No support 11.0 5.2
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport en <input> 2.3 16.0 (16.0) No support (Yes) (Yes)

Veure

Document Tags and Contributors

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