Required input field gets border when value is emp

2019-04-12 00:12发布

站内文章 / HTML/CSS
54 0 0

问题:

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


标签： html css input border required
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~