是否可以仅使用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复制了此代码段