Yogesh Chauhan's Blog

How to make HTML form interactive and using CSS?

in CSS & HTML on July 2, 2019

CSS is full of wonders and almost all of them are really useful. One of them is, Pseudo-classes, which defines a state of an element. For example, it styles an element when user mouses over it or when the element gets focus. We are going to talk more about the later one.

There are many Pseudo-classes and we are going to discuss about :focus Pseudo-class.

Take a look at the code below.

In the code above, I have a simple form with text inputs elements. In CSS I am adding a condition or an element state in which it’ll change the color of input field to green when it gets focus. So, the CSS is set for “input:focus”.

Also, I’ve added one more field with ID “required” and that will change the color of the text input to red when that gets focus. AS SIMPLE AS THAT.

Moving forward with same topic, have you ever seen the search box in which when you try to enter something, it gets wider? It works on the same concept of :focus pseudo class.

Checkout the code below.

In the example above, in CSS, I am setting the default width of a text input to 100px and then adding a transition to that element. In next line, I am using pseudo class to to increase the width when it gets focus. And that small but powerful interactive feature can make user excited to use your website more because it’s cool!


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
What are CSS Specificity Rules and how does browser apply them?CSSHow to apply style only to first child and/or only to children other than the first child?CSSWhat is the correct way to enqueue multiple CSS files in WordPress?WordPressSequence generator (range) using JavaScript Array.from()JavaScriptUseful (and probably ignored) HTML tags: Part 2HTMLHow to select an element using its ID without the high specificity of the ID selector?CSS