The accent-color property styles browser-rendered form controls with brand colors. Here's how to use it.
Basic Usage#
1/* Apply to specific element */
2input[type="checkbox"] {
3 accent-color: #007bff;
4}
5
6/* Apply to all form controls */
7:root {
8 accent-color: #007bff;
9}
10
11/* Named colors */
12input {
13 accent-color: rebeccapurple;
14}
15
16/* RGB/HSL */
17input {
18 accent-color: rgb(0, 123, 255);
19 accent-color: hsl(211, 100%, 50%);
20}
21
22/* CSS variables */
23:root {
24 --brand-color: #007bff;
25}
26
27input {
28 accent-color: var(--brand-color);
29}Supported Elements#
1/* Checkbox */
2input[type="checkbox"] {
3 accent-color: #28a745;
4 width: 20px;
5 height: 20px;
6}
7
8/* Radio button */
9input[type="radio"] {
10 accent-color: #dc3545;
11 width: 20px;
12 height: 20px;
13}
14
15/* Range slider */
16input[type="range"] {
17 accent-color: #ffc107;
18 width: 200px;
19}
20
21/* Progress bar */
22progress {
23 accent-color: #17a2b8;
24 width: 200px;
25 height: 20px;
26}
27
28/* Select (limited support) */
29select {
30 accent-color: #6c757d;
31}Theme Integration#
1/* Light/dark theme support */
2:root {
3 --accent: #007bff;
4}
5
6@media (prefers-color-scheme: dark) {
7 :root {
8 --accent: #4da3ff;
9 }
10}
11
12input,
13progress {
14 accent-color: var(--accent);
15}
16
17/* Theme classes */
18.theme-primary {
19 accent-color: #007bff;
20}
21
22.theme-success {
23 accent-color: #28a745;
24}
25
26.theme-danger {
27 accent-color: #dc3545;
28}
29
30.theme-warning {
31 accent-color: #ffc107;
32}
33
34/* Apply to form container */
35.form-primary {
36 accent-color: #007bff;
37}
38
39.form-primary input,
40.form-primary progress {
41 /* Inherits accent-color */
42}Color Contrast#
1/* Browser automatically adjusts checkmark/indicator color */
2/* for contrast against accent-color */
3
4/* Light accent - dark checkmark */
5.light-accent {
6 accent-color: #ffc107; /* Yellow - gets dark checkmark */
7}
8
9/* Dark accent - light checkmark */
10.dark-accent {
11 accent-color: #343a40; /* Dark - gets light checkmark */
12}
13
14/* The browser handles this automatically */
15/* You don't need to specify the checkmark color */Form Examples#
1<!-- Checkbox group -->
2<style>
3 .checkbox-group {
4 accent-color: #28a745;
5 }
6
7 .checkbox-group label {
8 display: flex;
9 align-items: center;
10 gap: 8px;
11 margin-bottom: 8px;
12 }
13
14 .checkbox-group input {
15 width: 18px;
16 height: 18px;
17 }
18</style>
19
20<div class="checkbox-group">
21 <label>
22 <input type="checkbox" checked>
23 Option 1
24 </label>
25 <label>
26 <input type="checkbox">
27 Option 2
28 </label>
29</div>
30
31<!-- Radio group -->
32<style>
33 .radio-group {
34 accent-color: #007bff;
35 }
36
37 .radio-group label {
38 display: flex;
39 align-items: center;
40 gap: 8px;
41 margin-bottom: 8px;
42 }
43</style>
44
45<div class="radio-group">
46 <label>
47 <input type="radio" name="size" value="small">
48 Small
49 </label>
50 <label>
51 <input type="radio" name="size" value="medium" checked>
52 Medium
53 </label>
54 <label>
55 <input type="radio" name="size" value="large">
56 Large
57 </label>
58</div>Range Slider Styling#
1/* Basic range styling */
2input[type="range"] {
3 accent-color: #007bff;
4 width: 100%;
5 height: 8px;
6}
7
8/* Range with custom track (WebKit) */
9input[type="range"]::-webkit-slider-runnable-track {
10 height: 8px;
11 border-radius: 4px;
12 background: #e9ecef;
13}
14
15input[type="range"]::-webkit-slider-thumb {
16 -webkit-appearance: none;
17 width: 20px;
18 height: 20px;
19 border-radius: 50%;
20 background: #007bff;
21 margin-top: -6px;
22}
23
24/* Range with custom track (Firefox) */
25input[type="range"]::-moz-range-track {
26 height: 8px;
27 border-radius: 4px;
28 background: #e9ecef;
29}
30
31input[type="range"]::-moz-range-thumb {
32 width: 20px;
33 height: 20px;
34 border-radius: 50%;
35 background: #007bff;
36 border: none;
37}
38
39/* Filled portion uses accent-color */
40input[type="range"]::-moz-range-progress {
41 background: #007bff;
42 height: 8px;
43 border-radius: 4px;
44}Progress Bar Styling#
1/* Basic progress */
2progress {
3 accent-color: #007bff;
4 width: 100%;
5 height: 20px;
6 border-radius: 10px;
7 overflow: hidden;
8}
9
10/* WebKit progress */
11progress::-webkit-progress-bar {
12 background: #e9ecef;
13 border-radius: 10px;
14}
15
16progress::-webkit-progress-value {
17 background: #007bff;
18 border-radius: 10px;
19}
20
21/* Firefox progress */
22progress::-moz-progress-bar {
23 background: #007bff;
24 border-radius: 10px;
25}
26
27/* Status-based colors */
28.progress-success {
29 accent-color: #28a745;
30}
31
32.progress-warning {
33 accent-color: #ffc107;
34}
35
36.progress-danger {
37 accent-color: #dc3545;
38}Responsive Theming#
1/* Different accent colors by breakpoint */
2:root {
3 accent-color: #007bff;
4}
5
6/* Mobile - more vibrant */
7@media (max-width: 768px) {
8 :root {
9 accent-color: #0056b3;
10 }
11}
12
13/* Print - neutral */
14@media print {
15 :root {
16 accent-color: #000;
17 }
18}
19
20/* High contrast mode */
21@media (prefers-contrast: high) {
22 :root {
23 accent-color: #000;
24 }
25}
26
27/* Reduced motion - still applies color */
28@media (prefers-reduced-motion: reduce) {
29 input[type="checkbox"],
30 input[type="radio"] {
31 transition: none;
32 }
33}Component Integration#
1/* Toggle switch using accent-color */
2.toggle-switch {
3 position: relative;
4 display: inline-block;
5}
6
7.toggle-switch input {
8 accent-color: #28a745;
9 width: 50px;
10 height: 26px;
11}
12
13/* Form card with themed controls */
14.form-card {
15 --card-accent: #6f42c1;
16 padding: 1.5rem;
17 border-radius: 8px;
18 background: #fff;
19 accent-color: var(--card-accent);
20}
21
22.form-card h3 {
23 color: var(--card-accent);
24}
25
26/* Settings panel */
27.settings-panel {
28 accent-color: #17a2b8;
29}
30
31.settings-panel .setting-row {
32 display: flex;
33 justify-content: space-between;
34 align-items: center;
35 padding: 0.75rem 0;
36 border-bottom: 1px solid #e9ecef;
37}JavaScript Integration#
1// Dynamic accent color
2function setAccentColor(color) {
3 document.documentElement.style.setProperty('accent-color', color);
4}
5
6// Theme picker
7const colors = ['#007bff', '#28a745', '#dc3545', '#ffc107', '#6f42c1'];
8
9colors.forEach((color) => {
10 const button = document.createElement('button');
11 button.style.background = color;
12 button.onclick = () => setAccentColor(color);
13 picker.appendChild(button);
14});
15
16// Get computed accent color
17const checkbox = document.querySelector('input[type="checkbox"]');
18const style = getComputedStyle(checkbox);
19console.log(style.accentColor);
20
21// Sync with brand color
22const brandColor = getComputedStyle(document.documentElement)
23 .getPropertyValue('--brand-color');
24setAccentColor(brandColor);Fallback Strategies#
1/* Fallback for older browsers */
2input[type="checkbox"] {
3 /* Fallback - custom checkbox */
4 appearance: none;
5 width: 20px;
6 height: 20px;
7 border: 2px solid #007bff;
8 border-radius: 4px;
9 position: relative;
10}
11
12input[type="checkbox"]:checked::after {
13 content: '✓';
14 position: absolute;
15 top: 50%;
16 left: 50%;
17 transform: translate(-50%, -50%);
18 color: #007bff;
19}
20
21/* Progressive enhancement */
22@supports (accent-color: auto) {
23 input[type="checkbox"] {
24 appearance: auto;
25 accent-color: #007bff;
26 }
27
28 input[type="checkbox"]:checked::after {
29 content: none;
30 }
31}Best Practices#
Usage:
✓ Set on :root for consistency
✓ Use CSS variables for theming
✓ Apply to form containers
✓ Consider color contrast
Browser Support:
✓ Chrome 93+
✓ Firefox 92+
✓ Safari 15.4+
✓ Edge 93+
Styling Tips:
✓ Combine with color-scheme
✓ Use for brand consistency
✓ Keep contrast accessible
✓ Test across browsers
Avoid:
✗ Relying solely on accent-color
✗ Ignoring fallbacks
✗ Poor contrast choices
✗ Overriding with appearance:none
Conclusion#
The accent-color property provides simple, consistent styling for native form controls. Use it to apply brand colors to checkboxes, radio buttons, range sliders, and progress bars. The browser automatically handles contrast for checkmarks and indicators, making it both easy to use and accessible.