CSS Accessibility

Modern Form Styling

Written by Swapnil RajaPublished 30 Jul 2026

Style native controls without discarding their states, platform behavior, or accessibility. The examples style inherited typography, borders, accent-color, validation, disabled controls, focus, autofill, and the risks of appearance: none.

Native form controls carry platform behavior, states, and accessibility that CSS should preserve. Styling succeeds only when checked, invalid, disabled, focused, and autofilled states remain clear.

A control’s resting appearance is the easiest state and the least important one to test alone. Browser autofill may change its background, validation may appear only after interaction, and keyboard focus needs a strong indicator. Native accent coloring often provides the desired branding without rebuilding a checkbox or radio button. This topic also connects with CSS Form Styling and CSS Input Fields.

Start by inheriting type

Example

css

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

input,
select,
textarea {
  border: 1px solid #94a3b8;
  border-radius: 0.4rem;
  padding: 0.65rem 0.75rem;
}

input[type="checkbox"] {
  accent-color: #0f766e;
}

accent-color customizes checkboxes, radio buttons, ranges, and progress controls while retaining native behavior.

Style states, not just the resting control

Example

css

.field:has(:user-invalid) {
  color: #991b1b;
}

input:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

Test focus, hover, disabled, read-only, checked, indeterminate, autofill, valid, and invalid states. Placeholder text is not a label.

Content-sized form fields

field-sizing: content lets supported inputs, textareas, and selects size themselves from their current content. Always pair it with sensible minimum and maximum dimensions so an empty field remains discoverable and long input cannot break the layout.

Example

css

input,
textarea,
select {
  field-sizing: content;
  min-inline-size: 8rem;
  max-inline-size: 100%;
}

Form Control Properties

Property or selector	Purpose	Example
appearance	Controls platform-native control styling.	appearance: none
accent-color	Sets the accent used by supported controls.	accent-color: rebeccapurple
caret-color	Sets the insertion caret color.	caret-color: currentColor
:user-invalid	Targets an invalid control after user interaction.	input:user-invalid

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Modern Form Styling example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

input,
select,
textarea {
  border: 1px solid #94a3b8;
  border-radius: 0.4rem;
  padding: 0.65rem 0.75rem;
}

input[type="checkbox"] {
  accent-color: #0f766e;
}

.field:has(:user-invalid) {
  color: #991b1b;
}

input:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

input,
textarea,
select {
  field-sizing: content;
  min-inline-size: 8rem;
  max-inline-size: 100%;
}
  </style>
</head>
<body>
  <main><form><label>Email <input type="email" required value="invalid"></label><label><input type="checkbox" checked> Subscribe</label><label>Topic <select><option>CSS</option><option>HTML</option></select></label><button>Submit</button></form></main>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
accent-color	93	93	92	15.4 partial; 26.2 full
:user-invalid	119	119	88	16.5

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

appearance: none removes native styling and transfers responsibility for every visible state to you. Use it only when the replacement has been tested thoroughly.
Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Style native controls by covering every state, not only their resting appearance.

Begin with inherited typography, spacing, borders, and accent color. Remove native appearance only when the replacement covers every state, input method, zoom level, and high-contrast mode. Keep labels and validation messages in HTML rather than simulating them with placeholders or generated content.

PreviousCSS Theming NextCSS User Interface