使用CSS检测输入中是否有文本 - 在我正在访问的页面上并且无法控制？

Question

使用CSS检测输入中是否有文本 - 在我正在访问的页面上并且无法控制？有没有办法通过CSS检测输入中是否有文本？我已经尝试过使用:empty伪类，我尝试过使用[value=""]，但两者都没有用。我似乎无法找到一个解决方案。我想这一定是可能的，考虑到我们有伪类:checked，而且:indeterminate两者都是类似的东西。请注意：我这样做的是“时尚”风格，无法使用JavaScript。另请注意，在用户无法控制的页面上使用Stylish，客户端。

Answer 1

您可以使用:placeholder-shown伪类。从技术上讲，需要占位符，但您可以使用空格。

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

<input placeholder="Text is required" /><input placeholder=" " value="This one is valid" /><input placeholder=" " />