Erforderliche input-Feld bekommt der Grenze, wenn der Wert leer ist und die Farbe ist im Stil

Könnte Sie mir erklären?

Führen Sie diese in Firefox:
http://jsfiddle.net/eMa8y/24/

HTML:

<html>

    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    </head>

    <body>
        <form>
            <input type="text" placeholder="input" required />
            <input type="text" placeholder="input" />
        </form>
    </body>

</html>

CSS:

input {
    color:black;
}
[required] {
    color:red;
}

SKRIPT:

$(document).ready(function () {
    setTimeout(function () {
        $("input").val("");
    }, 3000);
});

Warten Sie drei Sekunden und der Eingang erhält einen roten Rahmen. Warum? Ist es ein bug von Firefox?

Hinweis, dass ich Firefox 18.0.2.

Dank.

InformationsquelleAutor user1608790 | 2013-02-15

  1. 9

    Dem HTML5-Attribut required ist offensichtlich interpretiert von firefox enthalten einen roten Rand, hier ist eine Antwort über das entfernen

    Firefox 4 Benötigt die Eingabe-Formular ROTEM Rand/Umriss

    so einfach tun:

    [required] {
    color:red;
    box-shadow: none;
}

    festen

    InformationsquelleAutor Liam

  2. 1

    Dies ist kein bug, das wie Firefox betont, dass dieser Eingang muss ein Wert.

    required wird unterstützt von Firefox: https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-required

    Mehr Erklärung hier: http://www.html5tutorial.info/html5-required.php

    Weil Ihr Skript durchläuft alle Eingänge in der Reihenfolge der gegründet in den DOM, Ihre erforderlichen input den Fokus verliert, da es eine input dahinter. Also aufrufen von Firefox-Validierung, die Prüfung, wenn dieser Eingang einen Wert hat.

    Interne Firefox-Stil:

    :-moz-ui-invalid:not(output) {
    box-shadow: 0 0 1.5px 1px red;
}
    Dies geschieht, wenn das input-element ausgewählt ist, indem die id-Selektor zu.

    InformationsquelleAutor jerone

Schreibe einen Kommentar