HTML表单输入初始，焦点和填写状态

Question

我正在使用具有3种状态的bootstrap设计表单。

1. 初始未填写状态
2. 焦点状态
3. 填写状态（前用户在文本框中输入内容）

我目前无法区分状态＃1和＃3。这可能没有javascript吗？

Answer 1

目前没有CSS可以区分＆＃34;空＆＃34;并且＆＃34;不是空的＆＃34; （除非您在将内容复制到value属性的每次击键时使用Javascript。）

但是，您可以使用:valid伪类。如果您不介意要求用户在文本框中输入内容，则可以添加required属性，然后非空值将有效！

＆＃13;

＆＃13;

input {background:white} /* empty state */

input:valid {background:yellow} /* has content typed in */

＆＃13;

<input required>

＆＃13;

＆＃13;

＆＃13;