CSS form appearance and accent color: retain native behavior

When to use it

A case intake form has checkboxes for optional notifications. Give the controls an accent color and leave their native checked mark, focus behavior, and keyboard support intact. Setting appearance: none would require reconstructing every visible state and verifying platform behavior; that is rarely justified for a routine preference field. The sample sizes the controls modestly without hiding their labels. Check checked, unchecked, disabled, and high-contrast states, as well as touch target size created by the label area. Accent color alone does not establish text contrast or a validation message. The form's HTML still owns the label and submission value, and the server must persist the preference. Styling should not suggest the option is saved before confirmation.

.case-preference { display: flex; align-items: start; gap: .65rem; }
.case-preference input[type="checkbox"] { accent-color: #175b44; inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .15rem; }
.case-preference label { line-height: 1.4; }

Cost and verification

The native control incurs no custom image or script request. The main cost of appearance: none would be state reconstruction and cross-platform QA; avoid that unless the product has a compelling need. Different browsers may render the accent slightly differently, so verify the intended support set rather than demanding identical pixels. Do not use a CSS pseudo-element as the only checked indicator. The actual checkbox state and associated label should remain usable when the stylesheet fails.

Common Mistakes

• Do not remove native appearance without rebuilding every visible state.
• Do not color a checkbox without checking its label and focus state.
• Do not mistake the checked paint for a saved server preference.

Connected lessons

• CSS Property Decisions
• CSS form states: make errors and disabled fields explicit
• CSS focus-visible: keep keyboard location unmistakable
• HTML form help: connect visible instructions and errors to a control

Further native-state decisions

• CSS :indeterminate: show a mixed selection without inventing its meaning