Forms are stylized to a great extent using CSS. Consider the following properties::
Property | Value | Used On | Description |
---|---|---|---|
width | 100%; | input, textarea, select | Width of element |
height | 50px; | Input, textarea, select | height of element |
padding | 15px; / 15px 15px; / 15px 15px 15px; / 15px 12px 15px 12px | Input, textarea, select | Space between boundary and element |
margin | 15px; / 15px 15px; / 15px 15px 15px; / 15px 12px 15px 12px | Input, textarea, select | space around elements |
box-sizing | border-box; | Input, textarea, select | element sizing |
border | 1px solid #ddd; | Input, textarea, select | Border of element |
border-bottom border-top border-left border-right | 1px solid #ddd; | Input, textarea, select | Particular border of element |
border-radius | 4px; | Input, textarea, select | Border with rounded corners |
color | white; | Input, textarea, select | Text color of elements |
background-color | #4CAF50; | Input, textarea, select | Background color of elements |
background-image | url("paper.gif"); | Input, textarea, select | background-image |
input:hover {background-color: #f5f5f5;}
input:focus {background-color: #f5f5f5;}
Example 1: height, width, padding & margin
Example 2: border & border-radius
Example 3: color & background-color
Example 4: hover & focus states