输入:页面加载时应用无效的 CSS 规则

input:invalid css rule is applied on page load

本文关键字：无效 CSS 规则 应用 加载 输入      更新时间：2023-09-26

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

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

input:invalid{
    border-color:orange
}

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

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

以下是您要查找的内容： http://jsfiddle.net/CaseyRule/16fuhf6r/2/

样式如下：

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

然后添加这个JavaScript（我在这里使用jQuery）：

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

我不相信没有JavaScript有办法实现这一目标。

这里有一篇关于如何防止：无效样式在页面加载时激活（以及其他 css 技巧）的好文章。该技术需要一个占位符属性，但除此之外，它是一个纯粹的 css 解决方案。

input:not(:placeholder-shown):not(:focus):invalid {
    border-color:orange;
}

在 Firefox 中，您可以使用：

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

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

也许这有效：

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

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

相关文章：