css - Chrome 忽略输入范围的 CSS 样式

Question

做一个简单的网络混合的东西，但 Chrome 似乎不喜欢我的范围 slider 上的拇指的 CSS。他们的轨道似乎运行良好(或者足够好，我可以解决任何我不满意的问题)。

input[type=range] {
  -webkit-appearance: slider-vertical;
  width: 20px;
  height: 80%;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 30px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 20px;
  height: 80%;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #434546;
  border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 40px;
  width: 30px;
  border-radius: 3px;
  background: #ffffff;
  -webkit-appearance: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #434546;
}

<div class="container">
  <input type="range" />
</div>

其中大部分来自，但我做了一些更改:http://danielstern.ca/range.css/#/

Answer 1

在代码笔片段中找到了解决方案，您必须将 -webkit-appearance: none 设置为字段:

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  background: transparent; /* Otherwise white in Chrome */
}

整个例子https://codepen.io/freoted/pen/bENyzL