css - 为空输入文本字段应用不同的样式(使用 CSS)？

Question

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

是否可以仅使用 CSS 来完成此操作？我知道有 input[type='text'][value]选择器。但是，这并不反射(reflect)用户在完成加载后对表单所做的任何更改，因此如果表单加载时没有值，则无论用户做什么，它都将保持不变。

Answer 1

您可以为文本字段提供 required 属性:

<input type="text" required />

然后使用 CSS 检查有效性:

input:invalid { background: green; }

或相反(仅旧浏览器不同):

input:valid { background: blue; }