CSS 将样式应用于空输入 (\[value=''\])

Question

我想对表单中所有必需且为空的输入应用特殊样式。

当我在我的 css 中编写时它确实有效

input[required='required'] {
    bla-bla-bla;
}

但它不起作用，当我写

input[value=''] {
   bla-bla-bla;
}

我知道我可以使用 jQuery 来做到这一点，但如果可能的话，我想在纯 CSS 中做到这一点。

可以这样做吗？

先感谢您，

蒂莫菲。

原文由 Ibolit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

搜索 _css 样式的空输入_，发现以下内容：

使用 CSS 匹配一个空的输入框

您需要使用 JavaScript。

要使用 CSS 样式，您必须在 HTML 中输入属性： value='' ，但无论值是否在会话中更改，CSS 都会匹配。

原文由 Yuji ‘Tomita’ Tomita 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您不必支持较旧的 IE 版本，您可以将输入中的 placeholder 属性设置为某物（可以是空格，但必须是某物）并使用 :placeholder-shown 来定位那个输入。

 <input type="text" class="custom-input" placeholder=" ">

 .custom-input:placeholder-shown {
    /* Your rules */
}

原文由 TommyZG 发布，翻译遵循 CC BY-SA 4.0 许可协议