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

html css input border required

user1608790 · Feb 15, 2013 · Viewed 16k times · Source

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.

Answer

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

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

Answer

Related questions