3

In CSS accent-color is used to change the colour of certain form elements such as progress, range inputs, radio inputs, and checkbox inputs.

input {
  accent-color: #FF0000;
}
<input type="range" />

This only changes the main color though... Is there a CSS property to just as easily change the secondary colour? (The secondary colour being the white background of the slider in the above example.)

I am aware that the color-scheme property exists but I am hoping for more control than just light/dark.

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Liam Pillay
  • 592
  • 1
  • 4
  • 19
  • Does this answer your question? https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider – savageGoat Feb 07 '22 at 02:53
  • 1
    @savageGoat Not exactly, I am aware you can completely redo the slider but I am hoping for a simple property that can change the default slider's colours like `accent-color` can. – Liam Pillay Feb 07 '22 at 02:55
  • 1
    it seems there's no "general" property, so far, what I've found are specific pseudo-classes, for progress https://stackoverflow.com/questions/18368202/how-can-i-set-the-color-for-the-progress-element and range https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/#aa-styling-the-track – savageGoat Feb 07 '22 at 03:05
  • 4
    There isn't, at least for now. A (very if you are into colors) insightful spec discussion around this: https://github.com/w3c/csswg-drafts/issues/6159 – Kaiido Feb 07 '22 at 03:07
  • 2
    Recap of what @kaiido just posted: `RESOLVED: Close issue, one color accent-color for now` – savageGoat Feb 07 '22 at 03:09

0 Answers0