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.

label{
    color:red;
    font-size:22px;
}
▶ 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.

input{
    border: 2px solid red;
    width:100%;
}
▶ 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.

input[type=text]{
    border: 2px solid red;
    width:100%;
}
input[type=password]{
    border: 2px solid green;
    width:100%;
}
▶ 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.

input[type=text]{
    border: 2px solid silver;
    width: 15%;
    padding: 10px;
    background-image: url('search-icon.jpg');
    background-repeat: none;
}
input[type=text]:focus{
    border: 2px solid green;
    width:90%;
    background-color:#0066992c;
    transition:0.5s;
    padding: 10px 35px;
    font-size: 20px;
}
▶ Run the code

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.