Dazzling Form CSS Pseudo-classes 🤩

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.

1) placeholder-shown

       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

2) focus-within

       We know focus pseudo-class. However, If we have cases like changing the background color of the form while focusing the input element,
should we use javascript? I don't think so 🤫

       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.

3) required

        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

4) disabled

        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

5) in-range and out-of-range

        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

Ranged Input notification without Javascript

Alwar G ・ Jul 7 '20 ・ 2 min read

#html #css #codenewbie #beginners

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.