Styling Forms

CSS Styling Forms

CSS can improve the appearance and usability of HTML forms by controlling the size, spacing, borders, backgrounds, and focus styles of form controls. Consistent styling can make forms easier to understand while the HTML elements continue to provide the form's structure and meaning.

Basic Form Styling

Form controls can be styled with many familiar CSS properties, including width, padding, border, background-color, and font properties.

input,
select,
textarea {
  padding: 10px;
  border: 1px solid #cccccc;
  font: inherit;
}

Using font: inherit; allows these controls to use the font settings inherited from their surrounding content instead of relying on browser-specific form control defaults.

Styling Labels

Labels identify the purpose of form controls and can be styled to make form fields easier to scan.

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

Displaying a label as a block places it on its own line when it appears before a form control. CSS changes the label's presentation but does not replace the association between the HTML <label> element and its form control.

Styling Input Fields

Text-based <input> controls can be given consistent padding, borders, backgrounds, and other visual styles.

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

Attribute selectors make it possible to target particular input types without applying the same styles to controls such as checkboxes, radio buttons, or submit buttons.

Styling Textareas

A <textarea> can use many of the same styles as a text input. Its height can also be controlled while still allowing the visitor to enter multiple lines of text.

textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font: inherit;
}

Browsers normally allow textareas to be resized by the visitor. If the design needs to limit the resizing direction, CSS can use the resize property.

textarea {
  resize: vertical;
}

Styling Select Menus

The <select> element can be styled to better match other form controls.

select {
  width: 100%;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  background-color: #ffffff;
  font: inherit;
}

The exact appearance of some parts of a select menu can vary between browsers and operating systems because native interface controls may still influence its presentation.

Form Control Width

Setting a form control to width: 100%; makes it use the available width of its containing element. Using box-sizing: border-box; keeps padding and borders within that specified width.

input,
select,
textarea {
  width: 100%;
  box-sizing: border-box;
}

This combination is useful for creating controls that align consistently without becoming wider than their containers because of added padding or borders.

Form Spacing

Related labels and controls can be grouped so margins provide consistent vertical spacing between fields.

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

Consistent spacing helps separate individual fields while keeping each label visually connected to its control.

Focus Styles

A visible focus style helps visitors identify which form control currently has keyboard focus.

input:focus,
select:focus,
textarea:focus {
  border-color: #0088cc;
  outline: 2px solid #0088cc;
  outline-offset: 2px;
}

Do not remove the browser's focus indicator unless it is replaced with another clearly visible focus style.

Disabled Controls

The :disabled pseudo-class can style controls that have the HTML disabled attribute.

input:disabled,
select:disabled,
textarea:disabled {
  color: #777777;
  background-color: #eeeeee;
  cursor: not-allowed;
}

A disabled style can provide a visual indication that the control is currently unavailable, while the HTML disabled attribute determines its actual disabled state.

Form Layout

Forms can use normal document flow for simple vertical layouts or CSS layout methods such as Grid and Flexbox when fields need to be arranged in rows or columns.

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

A media query can change a multi-column form to a single column when the available width becomes too narrow.

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

Try Styling Forms

Edit the CSS in the example to change the form control borders, backgrounds, spacing, rounded corners, and focus styles. Use the Tab key to move between the controls and see how the focus indicator helps identify the active field.

Summary

CSS can improve the appearance and usability of forms by styling labels, inputs, textareas, select menus, spacing, and focus states. Properties such as padding, border, width, and box-sizing help create consistent controls, while Grid and Flexbox can organize more complex form layouts.

The next tutorial covers Styling Buttons and explains how CSS can control button colors, borders, spacing, interaction states, and other visual properties.