CSS forms

Similar to tables, forms can also be added effects by using CSS properties. Some of the properties are background color, border, width, hover effect, etc.

Width and Padding property:

This property adds spacing inside the text field i.e. it creates the space between the border and the text. For example,

input[type=text]
{ width= 100%;
padding: 10px 5px 20px 5px;
}

 

Border property:

We use the border property to add the color, style, and thickness of the borders. For example,

input{
border: 2px solid black;}

We can also use the border-radius property to add rounded corners. For example,

input[type= text]
{ border-radius: 5px;
}

 

Focus and hover effects:

:focus is used to change the background color of the input text when it is used and :hover changes the background color when the user hovers over the text. For example,

input:hover{
background-color: grey;}

 

Color and background-color:

To change the color of the text we use color property and to add color to the background we use the background-color property. For example,

input[type=text]
{ color: white;
background-color: green;}

 

As we have all seen that all forms have a submit button, so the styling of submit button can also be done using CSS properties. The properties are same as that of the properties used for styling text inside the forms such as background color, color, padding, margin, border etc.

For example,

input[type= button]
{ Color: white;
background-color: blue;
padding: 8px 4px;
margin: 5px 2px;
border: 1px solid dark-blue;
}