As a web developer, we all should work on forms. I always curious about form styles while working on the form.
Here I am going to tell you about some CSS Pseudo-classes that will help to improve the usability of the form.
We are aware about placeholder pseudo-class to style the placeholder text. But if we want to style the input element during the presence of placeholder text, then what should we do? Here placeholder-shown will comes into play 🔥 .
In this example we are changing the border color based on the placeholder text presence
We know focus pseudo-class. However, If we have cases like changing the background color of the form while focusing the input element,
Because we have wonderful focus-within Pseudo-class for changing the styles of the parent element.
Here we are changing the styles of the form if the input element is focussed.
As the name implies this pseudo-class apply the styles only on the element which are having the required attribute. By using this pseudo-class, we can highlight which elements should be filled.
In the above example, we are highlighting the required input border-color
The most common use case of disabled state is the styling cursor to
not-allowed for telling the the user which element is disabled.
Let's see the below example
While working with number fields, we can come across the cases like given number should be in the particular region.
I wrote the post about the number range. Kindly refer this
Thanks for reading this post 😍. I hope you learned something interesting. If You want to share something, kindly post your comments, and also don't forget to give your reactions to this post.