使用CSS匹配空输入框

Question

如何将样式应用于空输入框？如果用户在输入字段中键入内容，则不应再应用该样式。这在CSS中可行吗？我试过这个：

input[value=""]

Answer 1

如果只有required你可以去的领域input:valid#foo-thing:valid + .msg { visibility: visible!important; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;<input type="text" id="foo-thing" required="required">&nbsp;<span class="msg" style="visibility: hidden;">Yay not empty</span>或否定使用#foo-thing:invalid（信用@SamGoody）

Answer 2

更新字段的值不会更新DOM中的value属性，这就是为什么你的选择器总是匹配一个字段，即使它实际上不是空的。而是使用invalid伪类来实现您想要的，如下所示：input:required {&nbsp; border: 1px solid green;}input:required:invalid {&nbsp; border: 1px solid red;}<input required type="text" value=""><input required type="text" value="Value">