3 min read
•Question 44 of 49easyWhat is accent-color in CSS?
Styling form controls with accent-color.
What You'll Learn
- What accent-color does
- Supported elements
- Usage examples
What it Does
accent-color styles the accent of form controls without complex workarounds.
Supported Elements
- Checkboxes
- Radio buttons
- Range sliders
- Progress bars
Usage
styles.cssCSS
/* Global accent */
:root {
accent-color: #3498db;
}
/* Specific element */
input[type="checkbox"] {
accent-color: green;
}
input[type="range"] {
accent-color: purple;
}
progress {
accent-color: orange;
}With auto
styles.cssCSS
/* Browser default */
input {
accent-color: auto;
}