tutorialstonight logo
A Platform To Learn To Code

CSS FORM



Forms are made using HTML but we can improve its look using CSS. using CSS you can designe a beautiful form by creating borders, background color, hover effect, focus property, transition etc

you can control width, height and many other property of input field using CSS. you can also add image and focus property to the input fields.








CSS for label

You can add CSS property like font-size, color, shadow etc tolabel of form.

Example

Run the code

Output:


Setting CSS property to input field

You can select input field and define CSS property like width,border,shadow,margin etc.

Example

Run the code

Output:


Styling input field by its type

Instead of slecting all input you can select input fields by its type and specify CSS property.

Example

Run the code

Output:


Creating animated Search bar using CSS

To create animated search bar you can define input text field and specify CSS properties for it one for normal styling and one of cursor focus.

Example

Run the code