为空时（使用CSS）在输入文本字段中应用不同的样式？

Question

例如，新加载的表单包含<input type="text">，其具有绿色背景颜色。一旦用户在字段中输入值，我希望它变为蓝色。

是否有可能纯粹使用CSS来实现这一目标？我知道有input[type='text'][value]选择器。但是，这并不反映用户在完成加载后对表单所做的任何更改，因此如果表单没有加载任何值，则无论用户做什么，它都将保持不变。

Answer 1

您可以为文本字段指定required属性：

<input type="text" required />

然后使用CSS检查有效性：

input:invalid { background: green; }

或相反（仅针对旧浏览器不同）：

input:valid { background: blue; }

Answer 2

您只能使用JavaScript执行此操作。使用jQuery的Here's an example。

如果您只想更改background-color上的focus，可以使用恰当命名的:focus伪选择器。 Here's an example of this

Answer 3

仅使用 CSS 即可实现这一点。

  input:placeholder-shown{
    background:#cacaca;
  }

More details here。