3

你能给我解释一下吗？

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

等待三秒钟，输入会出现红色边框。为什么？这是Firefox的错误吗？

请注意，我使用的是 Firefox 18.0.2。

谢谢。

4

2 回答 2

9

HTML5 属性required显然被 firefox 解释为包含红色边框，这是关于删除它的答案

Firefox 4 必需的输入表单红色边框/轮廓

所以就这样做：

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

固定的

于 2013-02-15T12:58:08.307 回答
1

这不是错误，这就是 Firefox 突出显示该输入需要一个值的方式。

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

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

因为您的脚本按在 DOM 中创建的顺序遍历所有输入，所以您所需的输入失去焦点，因为它后面有一个输入。因此调用 Firefox 验证，检查该输入是否有值。

内部 Firefox 风格：

:-moz-ui-invalid:not(output) {
    box-shadow: 0 0 1.5px 1px red;
}
于 2013-02-15T12:57:42.450 回答