BFE.devAI解答 - CSS 问题
19. color of input elements

input[type="range"] { /* Sets the track color / background-color: #F44336; / Sets the thumb color */ --thumb-color: #F44336; }

input[type="range"]::-webkit-slider-thumb { background-color: var(--thumb-color); }

input[type="range"]::-moz-range-thumb { background-color: var(--thumb-color); }

input[type="range"]::-ms-thumb { background-color: var(--thumb-color); }

Explanation:

• We use the attribute selector input[type="range"] to target the range input element.
• We set the background-color property to #F44336 to change the color of the track.
• We use the --thumb-color custom property to set the color of the thumb. This allows us to reuse the same value in the vendor-prefixed pseudo-element selectors.
• We use vendor prefixes to target the thumb element in different browsers (::-webkit-slider-thumb for Chrome/Safari, ::-moz-range-thumb for Firefox, and ::-ms-thumb for Internet Explorer/Edge).
• We set the background-color property of each thumb selector to var(--thumb-color) to apply the custom color we set earlier.