Required input field gets border when value is empty and color is styled

问题

Could you explain me this?

Run this 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;
}

SCRIPT:

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

Wait three seconds and the input gets a red border. Why? Is it a bug of Firefox?

Note that I use Firefox 18.0.2.

Thanks.

回答1:

The HTML5 attribute required is obviously being interpreted by firefox to include a red border, here's an answer about removing it

Firefox 4 Required input form RED border/outline

so just do:

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

fixed

回答2:

This is not a bug, this how Firefox highlights that that input needs a value.

required is supported by Firefox: https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-required

More explanation here: http://www.html5tutorial.info/html5-required.php

Because your script loops through all inputs in order of founded in the DOM, your required input loses focus as there's an input behind it. Thus invoking Firefox validation, checking if that input has a value.

Internal Firefox style:

:-moz-ui-invalid:not(output) {
    box-shadow: 0 0 1.5px 1px red;
}

来源：https://stackoverflow.com/questions/14895141/required-input-field-gets-border-when-value-is-empty-and-color-is-styled

标签

html

css

input

border

required