CSS Forms

CSS Forms

The look of an HTML form can be greatly improved with CSS.

Example 1: Styling Input Fields

Use the width property to determine the width of the input field.

Example 2: Padded Inputs

Use the padding property to add space inside the text field.

Example 3: Colored Inputs

Use the background-color property to add a background color to the input, and the color property to change the text color.

Example 4: Focused Inputs

Use the :focus selector to do something with the input field when it gets focus.

Example 5: Input with Icon/Image

If you want an icon inside the input, use the background-image property and position it with the background-position property.

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}