html - 输入类型范围 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;
}

这是 inspector 元素的屏幕截图(我在 ipad os safari 上检查过它):

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

Answer 1

根据我的分析，添加一点 JS 应该会给你想要的输出。我已经设法使 -webkit-slider-thumb 的 background: transparent; 即使我的方法伴随着一些 JavaScript。这在 iOS 上完美显示；事实上，您看到的预览将是其他设备获得的。

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

其他(Chrome)预览:Samsung Galaxy S22 | Pixel 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>