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

Question

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

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

input:invalid{
    border-color:orange
}

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

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

score 3 · Accepted Answer

像这样设计它：

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

然后添加这个js：

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

我不相信没有 javascript 有办法实现这一点。

score 2 · Accepted Answer

在 Firefox 中，您可以使用：

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

这是浏览器添加的伪类以发出红色光芒。它不是在页面加载时添加的，否则所有输入都会发光。我在其他浏览器中没有找到等价物。

score -3 · Accepted Answer

也许这有效：

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

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

3 回答 3