logo标签列表

必填项为空时，要求输入框边框变色且颜色已设置。

htmlcssinputborderrequired
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的一个bug吗？

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

谢谢。

2个回答
9
HTML5属性required显然被Firefox解释为包括红色边框，这里有一个关于如何移除它的答案。 Firefox 4 Required input form RED border/outline 所以只需执行以下操作：
[required] {
    color:red;
    box-shadow: none;
}

固定

1
这不是bug，这是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;
}
当使用id选择器选中输入元素时，就会发生这种情况。 - user1608790
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接