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

Question

我在网站上实现输入类型范围时遇到了一个问题，我尝试将 -webkit-slider-thumb 的背景颜色设置为透明，但它在 ios 设备（iphone 和 ipad） safari 上不起作用， safari 检查器仍然显示用户代理样式，而不是我已经在 css 和内联 html 文件中实现的样式，这里是我在 css 文件和内联 html 中实现的 css 样式：

html文件

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

CSS 文件

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

这是检查器元素的屏幕截图（我在 ipad os safari 上检查了它）：

我注意到日期background-color值input[type="range"]::-webkit-slider-thumb仍然是白色（遵循用户代理默认样式）并且不遵循我的透明 CSS 文件

Answer 1

根据我的分析，添加一点 JS 应该会给你想要的输出。background: transparent;尽管我的方法附带了一些 JavaScript，但我还是成功地制作了 -webkit-slider-thumb 。这在 iOS 上完美呈现；事实上，您看到的预览将是其他设备获得的。

iOS (Safari) 预览： iPhone 14 | iPhone 14 Plus | iPhone 14 Plus iPhone 13 | iPhone 13 iPhone 12 迷你

其他（Chrome）预览：三星 Galaxy S22 | 像素 7 Pro

这支笔帮助我找到了解决方案：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>