尽管使用“-webkit-appearance： none”，但 Chrome 中的输入范围拇指未更改-解网

问：

尽管使用了 -webkit-appearance： none，但我仍在努力更改 Chrome 中输入范围拇指的样式。

在此处查看 codepen 中的完整代码 https://codepen.io/maz-sm-22/pen/GRXyzNv。

html

<body>
   <input type='range' value='50'/>
</body>

CSS

body {
  height: 100vh; 
  background-color: #36024F; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

input[type="range"] {
  -webkit-appearance: none;
  width: 60%;
  height: 16px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  background-image: linear-gradient(rgb(203, 124, 243), rgb(203, 124, 243));
  background-size: 50% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}

input[type=range]::-moz-range-thumb, 
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: #fefcff;
  cursor: pointer;
  box-shadow: 0px 0px 14px 5px rgba(255, 255, 255, 0.2);
}

input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

JS

const handleInputChange = (e) => {
    const value = e.target.value;
    console.log(value); 
    e.target.style.backgroundSize = `${value}% 100%`
}
    
document.addEventListener('input', handleInputChange)

它在Firefox中按预期工作。

如果有人对正在发生的事情有任何想法，我将不胜感激您的见解。

谢谢！

CSS Google-Chrome 网络套件

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: #fefcff;
  cursor: pointer;
  box-shadow: 0px 0px 14px 5px rgba(255, 255, 255, 0.2);
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: #fefcff;
  cursor: pointer;
  box-shadow: 0px 0px 14px 5px rgba(255, 255, 255, 0.2);
}

我不确定这是 chrome 错误还是功能，但这里报告了 crbug https://bugs.chromium.org/p/chromium/issues/detail?id=1486850

上一个：Chrome 分隔阿拉伯字母修复在 iOS Chrome 中似乎不起作用

下一个：两个角的边框半径会导致视觉故障 CSS

尽管使用“-webkit-appearance： none”，但 Chrome 中的输入范围拇指未更改

Input range thumb not changing in Chrome despite using `-webkit-appearance: none`

评论