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

【问题标题】：Apply different styles to input text field when empty (using CSS)?为空时（使用 CSS）对输入文本字段应用不同的样式？
【发布时间】：2011-12-29 15:01:22
【问题描述】：

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

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

【问题讨论】：

标签： css

【解决方案1】：

您可以为文本字段赋予required 属性：

<input type="text" required />

然后用 CSS 检查有效性：

input:invalid { background: green; }

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

input:valid { background: blue; }

【讨论】：

【解决方案2】：

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

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

【讨论】：

嗯，我希望保持外观仅限于样式表。感谢脚本和 js 工具。
当然。 :focus 是一个不错的伪选择器，可以做很多你想做的事情，但是我们现在已经习惯了如此多的定制，这在很大程度上依赖于 JS。 C'est la vie。

【解决方案3】：

这可以通过仅使用 CSS 来实现。

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

【讨论】：