具有非空属性的目标元素

Question

我想设置输入字段的样式但不知何故我必须检测此输入是否具有占位符属性以及是否实际填充。我想避免JS的事情，所以我的问题是：有没有任何CSS技巧，所以我可以针对这个特定的选择器？

目前我有：

<input type="text" placeholder="">

input[placeholder] {
 // my styles
}

但无论如何这都适用于样式。谢谢你的帮助。

Answer 1

您可以使用

之类的:not(）选择器

[placeholder]:not([placeholder=""]) {
  background: green;
}

<input type="text" placeholder="">

<input type="text" placeholder="test">