How Can I Style HTML5 Range Inputs with Two Distinct Colors (Green and Gray)?

Styling HTML5 Range Inputs with Distinct Colors

Problem:

To achieve a visually appealing range input, where the left side is green and the right side is gray.

Solution:

Achieving this effect requires browser-specific styling. While pure CSS solutions are possible, they vary depending on the targeted browser.

CSS Solution for Chrome:

• Hide overflow from input[range].
• Fill the thumb's preceding space with the desired left-side color using a shadow.

CSS Solution for IE:

• Use the built-in ::-ms-fill-lower pseudo-element to set the left-side color.

CSS Solution for Firefox:

• Use the built-in ::-moz-range-progress pseudo-element to set the left-side color.

Example Code:

/* Chrome */
input[type='range']::-webkit-slider-thumb {
  box-shadow: -80px 0 0 80px #43e5f7;
}

/* IE */
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}

/* Firefox */
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}

This CSS code ensures that the left side of the range input is green and the right side remains gray, providing the desired visual effect.

The above is the detailed content of How Can I Style HTML5 Range Inputs with Two Distinct Colors (Green and Gray)?. For more information, please follow other related articles on the PHP Chinese website!