HTML Form Input Start, Focus, and Filled States
I am developing a form using a tri-state bootstrap.
- Initial unfilled state
- Focused state
- Filled state (for example, the user enters something into the text field)
I am currently having trouble differentiating states # 1 and # 3. Is it possible to do without javascript?
+3
user1571609
source
to share
1 answer
There is currently no CSS that distinguishes between "empty" and "non-empty" (unless you are using Javascript for every keystroke that copies the content to an attribute value
).
However, there is pseudo text :valid
that you can use. If you don't mind for the user to enter something in the textbox, you can add an attribute required
and then there will be a non-empty value!
input {background:white} /* empty state */
input:valid {background:yellow} /* has content typed in */
<input required>
+6
source to share