mozilla
Ihre Suchergebnisse

    :out-of-range

     

    Übersicht

    Die :out-of-range CSS Pseudoklasse passt, wenn das value Attribut eines Elements außerhalb der angegebenen Begrenzungen für dieses Element ist. Sie erlaubt der Seite, darauf zu reagieren, dass der aktuell definierte Wert eines Elements außerhalb der Bereichsgrenzen ist. Ein Wert kann außerhalb eines Bereichs sein, wenn er entweder kleiner oder größer als die gesetzten Minimal- und Maximalwerte ist.

    Hinweis: Diese Pseudoklasse trifft nur auf Elemente zu, die Bereichsbegrenzungen haben. Falls keine solchen Begrenzungen existieren, kann der Wert des Elements weder innerhalb noch außerhalb der Grenzen liegen.

    Beispiel

    HTML

    <form action="" id="form1">
        <ul>Werte zwischen 1 und 10 sind gültig.
            <li>
                <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
                <label for="value1">Der Wert ist </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!';
    }
     

    Spezifikation

    Spezifikation Status Kommentar
    Selectors Level 4
    Die Definition von ':in-range' in dieser Spezifikation.
    Working Draft Keine Änderung
    CSS Basic User Interface Module Level 3
    Die Definition von ':in-range' in dieser Spezifikation.
    Working Draft Ursprüngliche Spezifikation

    Browser Kompatibilität

    Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Unterstützung für <input> 10.0 28.0 (28.0) Nicht unterstützt 11.0 5.2
    Merkmal Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Unterstützung für <input> 2.3 16.0 (16.0) Nicht unterstützt (Yes) (Yes)

    Siehe auch

    Schlagwörter des Dokuments und Mitwirkende

    Mitwirkende an dieser Seite: Sebastianz
    Zuletzt aktualisiert von: Sebastianz,