输入：页面加载时应用无效的css规则

Question

在Firefox或Chrome中查看这两个小提琴。 在this中，我只有一个带有required属性和submit按钮的简单表单。当框为空时按“提交”会使其设置为invalid（在Firefox中，它是红色轮廓）。但它会等到你按提交后显示它无效。

现在尝试this一个。它是相同的，除了有一些css：

input:invalid{
    border-color:orange
}

除此之外，在按下提交之前，即使也会应用橙色边框颜色。因此，当且仅当您为表单手动设置invalid样式时，浏览器才会应用它，这不是直观的行为。当然，在您输入任何内容之前，必填字段将无效。

有没有办法解决这个问题？

Answer 1

以下是您正在寻找的内容：http://jsfiddle.net/CaseyRule/16fuhf6r/2/

样式就像这样：

form.submitted input:invalid{
    border-color:orange
}

然后添加这个js：

$('input[type="submit"]').click( function(){
    $('form').addClass('submitted');
});

我不相信有一种方法可以在没有javascript的情况下实现这一目标。

Answer 2

在Firefox中，您可以使用：

:-moz-ui-invalid:not(output)

这是由浏览器添加的伪类，用于发出红光。它不是在页面加载时添加的，或者所有输入都会有此亮点。我在其他浏览器中找不到相同的功能。

Answer 3

也许这有效：

input:invalid{
    border-color:orange !important;
}

当输入无效时，这将覆盖分配给输入的任何其他边框颜色。