The accent-color property lets you customize the accent color of form controls like checkboxes, radio buttons, and range sliders. Here's how to use it.
Basic Usage#
1/* Set accent color for all form controls */
2:root {
3 accent-color: #3b82f6;
4}
5
6/* Or target specific elements */
7input[type="checkbox"] {
8 accent-color: #10b981;
9}
10
11input[type="radio"] {
12 accent-color: #8b5cf6;
13}
14
15input[type="range"] {
16 accent-color: #f59e0b;
17}
18
19progress {
20 accent-color: #06b6d4;
21}Supported Elements#
1/* Checkboxes */
2input[type="checkbox"] {
3 accent-color: #3b82f6;
4}
5
6/* Radio buttons */
7input[type="radio"] {
8 accent-color: #8b5cf6;
9}
10
11/* Range sliders */
12input[type="range"] {
13 accent-color: #10b981;
14}
15
16/* Progress bars */
17progress {
18 accent-color: #f59e0b;
19}
20
21/* Meter elements */
22meter {
23 accent-color: #06b6d4;
24}Brand Theming#
1/* Define brand colors */
2:root {
3 --brand-primary: #3b82f6;
4 --brand-success: #10b981;
5 --brand-warning: #f59e0b;
6 --brand-error: #ef4444;
7}
8
9/* Apply to form controls */
10input[type="checkbox"],
11input[type="radio"] {
12 accent-color: var(--brand-primary);
13}
14
15input[type="range"] {
16 accent-color: var(--brand-primary);
17}
18
19progress {
20 accent-color: var(--brand-primary);
21}
22
23/* Status-based colors */
24.success input[type="checkbox"] {
25 accent-color: var(--brand-success);
26}
27
28.warning input[type="checkbox"] {
29 accent-color: var(--brand-warning);
30}
31
32.error input[type="checkbox"] {
33 accent-color: var(--brand-error);
34}Dark Mode Support#
1:root {
2 accent-color: #3b82f6;
3}
4
5@media (prefers-color-scheme: dark) {
6 :root {
7 accent-color: #60a5fa;
8 }
9}
10
11/* Manual theme switching */
12[data-theme="light"] {
13 accent-color: #2563eb;
14}
15
16[data-theme="dark"] {
17 accent-color: #93c5fd;
18}Form Styling#
1/* Consistent form styling */
2.form {
3 accent-color: #3b82f6;
4}
5
6.form-group {
7 margin-bottom: 1rem;
8}
9
10.form-group label {
11 display: flex;
12 align-items: center;
13 gap: 0.5rem;
14 cursor: pointer;
15}
16
17.form-group input[type="checkbox"],
18.form-group input[type="radio"] {
19 width: 1.25rem;
20 height: 1.25rem;
21 cursor: pointer;
22}
23
24/* Size variations */
25.form-control-sm input[type="checkbox"],
26.form-control-sm input[type="radio"] {
27 width: 1rem;
28 height: 1rem;
29}
30
31.form-control-lg input[type="checkbox"],
32.form-control-lg input[type="radio"] {
33 width: 1.5rem;
34 height: 1.5rem;
35}Checkbox Group#
1.checkbox-group {
2 accent-color: #3b82f6;
3}
4
5.checkbox-item {
6 display: flex;
7 align-items: center;
8 gap: 0.75rem;
9 padding: 0.75rem;
10 border-radius: 8px;
11 cursor: pointer;
12 transition: background-color 0.2s;
13}
14
15.checkbox-item:hover {
16 background-color: #f3f4f6;
17}
18
19.checkbox-item input[type="checkbox"] {
20 width: 1.25rem;
21 height: 1.25rem;
22 flex-shrink: 0;
23}
24
25.checkbox-item label {
26 flex: 1;
27 cursor: pointer;
28}Radio Button Group#
1.radio-group {
2 accent-color: #8b5cf6;
3 display: flex;
4 flex-direction: column;
5 gap: 0.5rem;
6}
7
8.radio-option {
9 display: flex;
10 align-items: center;
11 gap: 0.75rem;
12 padding: 1rem;
13 border: 2px solid #e5e7eb;
14 border-radius: 8px;
15 cursor: pointer;
16 transition: all 0.2s;
17}
18
19.radio-option:has(input:checked) {
20 border-color: #8b5cf6;
21 background-color: #f5f3ff;
22}
23
24.radio-option input[type="radio"] {
25 width: 1.25rem;
26 height: 1.25rem;
27}Range Slider#
1.range-slider {
2 accent-color: #10b981;
3 width: 100%;
4}
5
6.range-container {
7 display: flex;
8 flex-direction: column;
9 gap: 0.5rem;
10}
11
12.range-slider {
13 height: 8px;
14 border-radius: 4px;
15 cursor: pointer;
16}
17
18.range-labels {
19 display: flex;
20 justify-content: space-between;
21 font-size: 0.875rem;
22 color: #6b7280;
23}
24
25.range-value {
26 text-align: center;
27 font-weight: 600;
28 font-size: 1.25rem;
29}Progress Indicators#
1.progress-bar {
2 accent-color: #3b82f6;
3 width: 100%;
4 height: 8px;
5 border-radius: 4px;
6}
7
8/* Different states */
9.progress-success {
10 accent-color: #10b981;
11}
12
13.progress-warning {
14 accent-color: #f59e0b;
15}
16
17.progress-error {
18 accent-color: #ef4444;
19}
20
21/* With label */
22.progress-container {
23 display: flex;
24 flex-direction: column;
25 gap: 0.5rem;
26}
27
28.progress-header {
29 display: flex;
30 justify-content: space-between;
31 font-size: 0.875rem;
32}Toggle Switch with accent-color#
1/* Native checkbox styled as toggle */
2.toggle {
3 accent-color: #3b82f6;
4 width: 3rem;
5 height: 1.5rem;
6 appearance: none;
7 background-color: #d1d5db;
8 border-radius: 9999px;
9 position: relative;
10 cursor: pointer;
11 transition: background-color 0.2s;
12}
13
14.toggle::before {
15 content: '';
16 position: absolute;
17 width: 1.25rem;
18 height: 1.25rem;
19 border-radius: 50%;
20 background: white;
21 top: 0.125rem;
22 left: 0.125rem;
23 transition: transform 0.2s;
24}
25
26.toggle:checked {
27 background-color: #3b82f6;
28}
29
30.toggle:checked::before {
31 transform: translateX(1.5rem);
32}Semantic Colors#
1/* Task/Todo list */
2.task-checkbox {
3 accent-color: #10b981;
4}
5
6/* Agreement/Terms */
7.agreement-checkbox {
8 accent-color: #3b82f6;
9}
10
11/* Priority selector */
12.priority-low input[type="radio"] {
13 accent-color: #10b981;
14}
15
16.priority-medium input[type="radio"] {
17 accent-color: #f59e0b;
18}
19
20.priority-high input[type="radio"] {
21 accent-color: #ef4444;
22}Survey/Rating#
1.rating-group {
2 display: flex;
3 gap: 1rem;
4}
5
6.rating-option {
7 accent-color: #f59e0b;
8 display: flex;
9 flex-direction: column;
10 align-items: center;
11 gap: 0.25rem;
12}
13
14.rating-option input[type="radio"] {
15 width: 1.5rem;
16 height: 1.5rem;
17}
18
19.rating-option label {
20 font-size: 0.75rem;
21 color: #6b7280;
22}
23
24/* Satisfaction scale */
25.satisfaction-1 { accent-color: #ef4444; }
26.satisfaction-2 { accent-color: #f97316; }
27.satisfaction-3 { accent-color: #f59e0b; }
28.satisfaction-4 { accent-color: #84cc16; }
29.satisfaction-5 { accent-color: #10b981; }Accessibility#
1/* High contrast mode */
2@media (prefers-contrast: more) {
3 :root {
4 accent-color: #000;
5 }
6}
7
8/* Forced colors mode */
9@media (forced-colors: active) {
10 input[type="checkbox"],
11 input[type="radio"] {
12 accent-color: Highlight;
13 }
14}
15
16/* Focus styles */
17input[type="checkbox"]:focus-visible,
18input[type="radio"]:focus-visible {
19 outline: 2px solid currentColor;
20 outline-offset: 2px;
21}Auto Value#
1/* Let browser choose based on color-scheme */
2input {
3 accent-color: auto;
4}
5
6/* Combined with color-scheme */
7:root {
8 color-scheme: light dark;
9 accent-color: auto;
10}
11
12/* accent-color: auto will use system colors
13 that contrast well with the background */Best Practices#
Usage:
✓ Set at :root for consistency
✓ Use CSS custom properties
✓ Match brand colors
✓ Support dark mode
Accessibility:
✓ Ensure sufficient contrast
✓ Test with high contrast mode
✓ Maintain focus visibility
✓ Don't rely on color alone
Supported Elements:
✓ checkbox
✓ radio
✓ range
✓ progress
✓ meter
Avoid:
✗ Over-customizing native controls
✗ Forgetting focus states
✗ Inconsistent colors
✗ Poor contrast ratios
Conclusion#
The accent-color property provides a simple way to theme native form controls with your brand colors. Apply it at the root level for consistency, use CSS custom properties for easy theming, and ensure you support both light and dark modes. It works with checkboxes, radio buttons, range sliders, and progress elements, making it easy to create cohesive form designs while maintaining native accessibility features.