How can I change the accent color of various HTML elements

user_11475511 0
Viewed 839

I want to change the accent color of checkboxes, sliders, radio buttons and select components. Is there any easy method for doing so?

css html
2 Answers

You can use the new accent-color property if you are using Chrome version 93+.

#checkbox {
  accent-color: limegreen;
}
<input type="checkbox" id="checkbox"/>
This works for checkboxes, sliders and radio buttons. There is currently no way to style the background of options of select components.

Browser support is still limited though. It will be supported in the next versions of Firefox and Edge too.

user_86136300

Using filter: hue-rotate for your inputs is useful

hue-rotate is counted in degrees that means that you can use 0-360deg

(This is supported in every browser)

Here's an example:

input {
  filter: hue-rotate(320deg)
}
<input type="checkbox" checked><br>
<input type="radio" checked><br>
<input type="range">

user_143602270
Related