Tutorials Tonight's Logo

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.


Output:


Setting CSS property to input field

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


Output:


Styling input field by its type

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


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.