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

Question

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

 input[value=""]

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

Answer 1

在现代浏览器中，您可以使用 :placeholder-shown 定位空输入（不要与 ::placeholder 混淆）。

 input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

更多信息和浏览器支持： https ://css-tricks.com/almanac/selectors/p/placeholder-shown/

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