Styling HTML Forms4 min read

I wanted to create a simple but good looking HTML Form for my applications. After searching the internet for inspiration this is what i came up with –

See the Pen HTML forms by hrishikesh mk (@avastava) on CodePen.0

Code

HTML

Inside the form (.fiform) the input elements are enclosed inside a container (div .fi). Inside the container comes the label element which encloses the input text and input elements. This is done so that the input element gets focus when the user clicks anywhere inside the label.

 

CSS

The form is given a display of table. Inside the form the input fields with labels are put in a container with a display of table-row. The labels are given a display of table-cell so that they fill the parent and its contents can be vertically aligned.

The input elements are given a width of 100% so that they fill the form width. Also let’s give the inputs the same background as the body. Input auto-fill color is also changed in webkit browsers using -webkit-autofill property.

Everything looked good until the time came to add check-boxes to the form. So i started my search for cool check box styles.

Fortunately I came across a youtube channel called Devtips. So i just stole the idea and got a good checkbox style for my form.

Here is the link to their tutorial – How to make Custom Animated Checkboxes with CSS .

Javascript

Now the only thing left was to highlight the label text when the input element is in focus. So let’s bring in some javascript.

And the form is ready.

Link to part two of the tutorial – Styling HTML Forms 2 .