Skip to content

Input Styling

Styling inputs can be confusing and frustrating. Some familiar style properties such as background-color, color, and font-size work as expected. Other useful selectors, pseudo-classes, and, pseudo-elements for inputs are demonstrated in the example below, including:

  • accent-color: Changes the color of a checked radio button.
  • :active: Selects buttons when they are in the active state (during a click, before the mouse is released).
  • :focus: Selects inputs when they are in the focus state (i.e., when the cursor is inside the input field)
  • outline: Changes the highlight color around inputs when they are in the focus state.
  • ::placeholder: Selects the placeholder text (set using the placeholder attribute) for styling.

CSS generators can be very heplful when styling inputs. For example, this Style Input Range utility from CSS Portal makes it easy to customize the appearance of sliders.

See the Pen Input Styling (IMS322 Docs) by Eric Sheffield (@ersheff) on CodePen.