:in-range

Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

 

Summary

The :in-range CSS pseudo-class matches when an element has its value attribute inside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is inside the range limits.

Note: this pseudo-class only applies to elements that have a range limitations. In absence of such a limitation, the element can neither be 'in-range' nor 'out-of-range'.

Syntax

:in-range { style properties }

Example

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!';
}

Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of ':in-range' in that specification.
Living Standard Defines when :in-range matches elements in HTML.
Selectors Level 4
The definition of ':in-range' in that specification.
Working Draft Initial specification.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support on <input> 10.0[1] 29.0 (29.0)[2] No support 11.0[1] 5.2[3]
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support on <input> 2.3[1] 16.0 (16.0)[2] No support (Yes)[1] (Yes)[3]

[1] In Blink :in-range initially also matched disabled and read-only inputs (see Chromium bug 602568. This was changed to only apply to enabled read-write inputs in Chrome 52 and Opera 39.

[2] In Gecko :in-range initially also matched disabled and read-only inputs (see bug 1264157. This was changed to only apply to enabled read-write inputs in Gecko 50 (Firefox 50 / Thunderbird 50 / SeaMonkey 2.47).

[3] In WebKit :in-range initially also matched disabled and read-only inputs (see WebKit bug 156530. This was changed to only apply to enabled read-write inputs in current versions of WebKit.

See also

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: Sebastianz, cvrebert, teoli, AFBarstow, FredB
 Zuletzt aktualisiert von: Sebastianz,