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

Question

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

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

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

但是当我写的时候它不起作用

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

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

可以吗？

提前谢谢你，
蒂莫菲。

Answer 1

如果您不必支持较旧的 IE 版本，您可以将输入的 placeholder 属性设置为某物(可以是空格，但必须是某物)并使用 :placeholder -显示 以该输入为目标。

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

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