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