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

在Firefox或Chrome中查看这两个小提琴。 在一个例子中，我得到了一个简单的表单，它有一个

required

属性和一个

submit

按钮。当框为空时按“submit”（提交）会将其样式设置为无效（在Firefox中为红色轮廓）。但它会一直等到您按submit以显示它无效

现在试试看。它是相同的，只是有一些css：

input:invalid{
    border-color:orange
}

除此之外，即使在按下提交之前，也会应用橙色边框颜色。因此，如果且仅当您手动设置表单的

无效

样式时，浏览器才会应用它，这不是直观的行为。当然，在您输入任何内容之前，必填字段将无效

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

也许这样可以：

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

---

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

以下是您要查找的内容：

如下所示：

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

然后添加以下内容：

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

---

我不相信没有javascript就可以实现这一点。

在Firefox中，您可以使用：

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

---

这是浏览器添加的伪类，以提供红色辉光。它不是在页面加载时添加的，否则所有的输入都会有这种光晕。我还没有在其他浏览器中找到类似的功能。

根据

：invalid

伪类的说明，它的工作方式似乎与规范中的工作方式相同。不幸的是，这并没有回答OP的问题。问题是为什么CSS在表单提交之前应用，而不是在表单提交之后应用。在这种情况下，没有优先权问题。CSS加载正确。