所需的输入域得到边境时为空值和颜色的样式(Required input field gets bor

2019-08-16 23:47发布

你能解释我这个？

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

脚本：

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

等待三秒钟，输入得到一个红色边框。为什么？它是火狐的一个bug？

请注意，我使用Firefox 18.0.2。

谢谢。

Answer 1:

HTML5的属性required显然是被火狐解释为包括红色边框，下面是有关删除它的答案

火狐4必需的输入形式红色边框/大纲

所以只是做：

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

固定

Answer 2:

这是不是一个错误，火狐这怎么强调指出的是输入需要的值。

required是Firefox支持： https://developer.mozilla.org/en-US/docs/HTML/Element/input#attr-required

这里更多的解释： http://www.html5tutorial.info/html5-required.php

因为你的脚本中创建于DOM顺序遍历所有的投入，您需要输入失去焦点，因为它背后的输入。因此调用Firefox的验证，检查是否是输入具有价值。

内部火狐风格：

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

文章来源: Required input field gets border when value is empty and color is styled