无法控制页面，但通过CSS检测输入是否包含文本

Question

有没有办法通过CSS来检测输入框是否有文本？我尝试使用:empty伪类和[value=""]，但都没有成功。我似乎找不到一个解决方案。

我想这一定是可能的，考虑到我们有:checked和:indeterminate这样的伪类，它们都是类似的东西。

请注意：我是为了一个“Stylish”样式而做这个，不能使用JavaScript。

还要注意，Stylish是在用户无法控制的页面上使用的，客户端的。

Answer 1

您可以使用:placeholder-shown伪类。技术上来说，需要一个占位符，但您可以使用一个空格代替。

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

<input placeholder="需要文本" />
<input placeholder=" " value="这个有效" />
<input placeholder=" " />