是否可以仅使用 CSS 更改修改后的输入字段的样式？

Question

我知道使用 JavaScript，我可以有一个输入表单，它可以通过执行以下操作来修改那些已修改的值的样式：

<input type="text" onchange="changeMyStyle()">

（其中 changeMyStyle 将是一个显而易见的功能，但我现在不想破解，尤其是在我不需要它的情况下。）

不过，我也知道 CSS 的功能越来越复杂，但我所知道的大部分内容仅限于 CSS2 或更早版本。

是否有可能使用纯 CSS 实现等价物，也许使用伪类？

(这是我们的页面——我们可以完全控制它。但是，目前我们在 Elixir/Pheonix 中渲染页面，不需要客户端 JavaScript。因为我不是 JavaScript 的粉丝，我只是真正想要的是可以被视为样式更改的东西，我希望避免将 JavaScript 放入项目中。）

Answer 1

您可以使用:placeholder-shown 伪类。我不知道 css2 是否支持它，因为我只使用 css3。这个类基本上是检查占位符是否显示。要检查输入字段中是否有值，您可以将此选择器与 :not 伪类结合使用。

大多数modern browsers都支持 除此之外，我想不出除了 JavaScript 之外的其他选择。

这看起来像这样：

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=" " />

顺便说一句，我从here复制了这个sn-p