How to style #CSS Element State Pseudo Classes
🧵A thread🧵
:in-range and :out-of-range
Style number type inputs when the value entered by user is out-of-range or in-range.
:enabled & :disabled
Style the elements in enabled (default) and disabled state.
Disabled state is handy when displaying immutable data and helping users avoid multiple clicks on a form button.
:checked
Checked state for radio and checkbox type inputs which are commonly used in forms.
Use it to change the label style to add another visual cue for the user.
:invalid
Checks if the input type specified matches the value entered.
If the input type is email and the user enters an invalid email then you can use :invalid selector to give hint to the user.
:hover :focus :active
Style all three states if it's the preferred behavior.
Otherwise you can combine :active and :hover states.
Which other pseudo states do you normally use?
Any suggestions for the next topic you want me to cover in CSS.
I'd love to know your suggestions.
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.