Styling Native Form Controls

Why Form Controls Are Harder to Style

Elements like text inputs, checkboxes, selects and buttons are rendered by the browser and operating system using their own native appearance, which historically made them resist normal CSS styling far more than a plain <div> would.

Styling Text Inputs

input[type="text"], input[type="email"] {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit; /* inputs do not inherit font styles by default */
}

Text-based inputs are the easiest to style, since most box-model properties, borders, and background colors apply normally. Note that inputs do not automatically inherit the surrounding page's font - font: inherit fixes the common mismatch where an input's text looks different from the rest of the page.

Resetting Native Styling with appearance

select {
  appearance: none; /* removes the native dropdown arrow and browser chrome */
}

appearance: none strips away a control's default OS-specific look, giving a blank slate to apply fully custom styles - though for something like a <select>, removing the native arrow means a custom one usually needs to be added back with a background image or pseudo-element.

Keeping Focus Styles Accessible

input:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

Whatever custom styling is applied, a clear focus indicator must remain for keyboard users - removing it for visual polish is one of the most common form accessibility mistakes.

A Practical Note on Consistency

Different browsers and operating systems render the same form control slightly differently by default. Applying a consistent baseline (padding, border, font) across all form elements early in a project reduces small visual inconsistencies later.