🎨 One Line, Beautiful Checkboxes
Customizing checkboxes used to require JavaScript or CSS hacks. accent-color changes their color in one line.
đź“ť Basic Usage
/* Apply to all form controls */
body {
accent-color: #3498db;
}
/* Specific controls */
input[type='checkbox'] {
accent-color: #2ecc71;
}
input[type='radio'] {
accent-color: #e74c3c;
}
input[type='range'] {
accent-color: #f39c12;
}
progress {
accent-color: #9b59b6;
}
🎯 Real-World Example
/* Dark mode aware */
:root {
accent-color: #3498db;
}
@media (prefers-color-scheme: dark) {
:root {
accent-color: #5dade2;
}
}
/* Brand consistency */
.primary-form {
accent-color: var(--brand-primary);
}
/* Different color per state */
input:checked {
accent-color: #27ae60;
}
input:disabled {
accent-color: #95a5a6;
}
âś… Supported Elements
- Checkboxes (checkbox)
- Radio buttons (radio)
- Range sliders (range)
- Progress bars (progress)
- Dropdown menus (select, not fully supported)
“Used to spend hours styling checkboxes with CSS hacks. accent-color: #ff6600 does it instantly. Still can’t believe it’s that simple.”