Question

你可以解释一下这个吗？

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

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

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

感谢。

Answer 1

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

Firefox 4 Required input form RED border/outline

所以就这样做：

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

固定

Answer 2

这不是一个错误，这就是Firefox如何强调该输入需要一个值。

Firefox支持

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

当值为空并且颜色设置样式时，必需的输入字段获取边框

2 个答案: