当输入文本字段为空（使用CSS）时，应用不同的样式？ [英] Apply different styles to input text field when empty (using CSS)?

问题描述

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

For instance, a freshly loaded form contains an <input type="text"> which has a green background colour. Once the user enters a value into the field, I would like it to be coloured blue instead.

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

Is it possible to accomplish this purely using CSS? I understand there is the input[type='text'][value] selector. However, this does not reflect any changes to the form made by the user after it has finished loading, so if the form loaded with no value, it would remain unchanged regardless of what the user does.

推荐答案

您可以给文本字段必需属性：

You could give the textfield the required attribute:

<input type="text" required />

，然后使用CSS检查有效性：

and then check for validity with CSS:

input:invalid { background: green; }

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

or the opposite (only different for old browsers):

input:valid { background: blue; }

这篇关于当输入文本字段为空（使用CSS）时，应用不同的样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！