Can I Style an HTML5 Range Input with Two Different Colors Using Only CSS?

Styling HTML5 Range Input with Different Colors

Question:

Is it possible to style an HTML5 range input to have different colors on either side of the slider? For instance, green on the left and gray on the right? Idealy, a pure CSS solution would be preferred, compatible with WebKit browsers.

Solution:

Absolutely, achieving this customization with pure CSS is feasible. Our solution leverages browser-specific CSS properties to target different browsers:

Chrome:

input[type='range'] {
  overflow: hidden;
  width: 80px;
  -webkit-appearance: none;
  background-color: #9a905d;
}

input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  -webkit-appearance: none;
  color: #13bba4;
  margin-top: -1px;
}

input[type='range']::-webkit-slider-thumb {
  width: 10px;
  -webkit-appearance: none;
  height: 10px;
  cursor: ew-resize;
  background: #434343;
  box-shadow: -80px 0 0 80px #43e5f7;
}

Firefox:

input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}

Internet Explorer:

input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

HTML Snippet:

<input type="range"/>

This code snippet will create a range input with a green left side and a gray right side. For full functionality in all major browsers, ensure to include all the provided browser-specific code blocks.

The above is the detailed content of Can I Style an HTML5 Range Input with Two Different Colors Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!