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

Question

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

1. 最初的未填写状态
2. 聚焦状态
3. 填写状态(前用户在文本框中键入内容)

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

Answer 1

目前没有CSS区分"空"和"非空"(除非您在每次将内容复制到value属性的击键时使用Javascript ).

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

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

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

<input required>