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

在 Firefox 或 Chrome 中查看这两个 fiddle。 在this http://jsfiddle.net/hezgkxoh/2/一，我只有一个简单的表格required属性和一个submit按钮。当框为空时按“提交”会导致其样式为invalid（在 Firefox 中，它是红色轮廓）。但它会等到你按下提交后才显示它是无效的。

Now try this http://jsfiddle.net/16fuhf6r/一。除了有一些 css 之外，它是相同的：

input:invalid{
    border-color:orange
}

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

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

有一篇好文章HERE https://matemarschalko.medium.com/advanced-css-only-input-fields-interactive-animated-validated-d7ecff3cde8c#c828关于如何防止 :invalid 样式在页面加载时激活（以及其他 CSS 技巧）。该技术需要 Placeholder 属性，但除此之外，它是一个纯 CSS 解决方案。

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