Required input field gets border when value is emp

2019-04-12 00:39发布

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.

标签： html css input border required

2条回答

聊天终结者

2楼-- · 2019-04-12 01:00

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

0人赞添加讨论(0) 举报

老娘就宠你

3楼-- · 2019-04-12 01:03

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

0人赞添加讨论(0) 举报

Required input field gets border when value is emp

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间