输入类型范围 webkit-slider-thumb 背景颜色不会在 ios safari 中改变？

Question

I came across an issue when implementing input type range on my site, i tried to set the background color for the -webkit-slider-thumb to be transparent, but it is not working on the ios device (iphone and ipad) safari, the safari inspector still showing the user agent style instead of the style i already implement in my css and inline html file, here the css style i implement in my css file and inline html:

html file

<input class="slider" list="steplist" max="100" name="range" type="range" value ="0" />

css file

input[type="range"]::-webkit-slider-thumb, 
input[type="range"]::-webkit-slider-thumb:active{
    background-color: transparent !important;
}

here is the screencap for the inspector element (i inspected it on ipad os safari):

I noticed date the background-color of input[type="range"]::-webkit-slider-thumb value is still white (following user-agent default style) and not following my css file which is transparent

Answer 1

According to my analysis, adding a bit of JS should give you the desired output. I have been managed to make -webkit-slider-thumb 's background: transparent; even though my approach comes along with a bit of JavaScript. This appears perfectly on iOS; in fact, what you see as preview will be what other devices get.

IOS (Safari) Previews: iPhone 14 | iPhone 14 Plus | iPhone 13 | iPhone 12 Mini

Other (Chrome) Previews: Samsung Galaxy S22 | Pixel 7 Pro

This pen helped me to figure out the solution: https://codepen.io/tippingpointdev/pen/bGgLqLY

 //Assign input range's id into variable const range = document.querySelector('#r-input'); function rangeOnChange(e) { let t = e.target //Assign range input's properties into variables const min = t.min; const max = t.max; const val = t.value; /* Adjust range progress as the thumb moves while avoiding overflows */ t.style.backgroundSize = (val - min) * 89 / (max - min) + '% 100%'; } //Trigger function on thumb move range.addEventListener('input', rangeOnChange); /* Adjust range progress at start */ range.style.backgroundSize = (range.value - range.min) * 89 / (range.max - range.min) + '% 100%';

 input[type="range"] { /* To hide ordinary range input */ -webkit-appearance: none; margin-right: 15px; height: 7px; background: lightgray; border-radius: 5px; /* Range progress background is set */ background-image: linear-gradient(gray,gray); background-size: 70% 100%; background-repeat: no-repeat; } /* Thumb styles */ input[type="range"]::-webkit-slider-thumb { /* To hide ordinary thumb */ -webkit-appearance: none; height: 15px; width: 15px; border-radius: 50%; /* Since range input is created manually, thumb background can be vary in color */ background: transparent; border: 1px solid gray; cursor: pointer; transition: background.3s ease-in-out; }

 <,-- Since some JS is used, an Id is added here --> <input id='r-input' type="range" value="70" min="0" max="100" /><p><small>Try moving transparent thumb to see range progress</small></p>