使用CSS匹配空输入框

Question

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

Answer 1

如果只有required你可以去的领域input:valid

#foo-thing:valid + .msg { visibility: visible!important; }      

 <input type="text" id="foo-thing" required="required">

 <span class="msg" style="visibility: hidden;">Yay not empty</span>

或否定使用#foo-thing:invalid（信用@SamGoody）

Answer 2

更新字段的值不会更新DOM中的value属性，这就是为什么你的选择器总是匹配一个字段，即使它实际上不是空的。

而是使用invalid伪类来实现您想要的，如下所示：

input:required {

  border: 1px solid green;

}

input:required:invalid {

  border: 1px solid red;

}

<input required type="text" value="">

<input required type="text" value="Value">