How Can I Customize the Appearance of HTML5 Range Input Sliders in Different Browsers?

Coloring HTML5 Range Input Sliders for WebKit

WebKit-based browsers display a native range input slider with a consistent appearance. However, adding custom styling to modify the appearance of this slider can be challenging.

For Chrome:

• Overflow Trick: Hide the default slider by setting overflow: hidden on the input.
• Shadow Effect: Create a shadow effect to fill the space left of the thumb with the desired color.

For IE and Firefox (Native Support):

• ::-ms-fill-lower: Use this pseudo-element in IE to fill the area below the thumbs.
• ::-moz-range-progress: Use this pseudo-element in Firefox to fill the area ahead of the thumb.

CSS Code Implementation:

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  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;
}

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

HTML Example:

<input type="range"/>

The above is the detailed content of How Can I Customize the Appearance of HTML5 Range Input Sliders in Different Browsers?. For more information, please follow other related articles on the PHP Chinese website!