CSS Accessibility
Modern Form Styling
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: noneremoves 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.