Javascript 为什么我的滑块拇指在Chrome或Safari中显示不正确，但在Firefox中却很好？

我试图覆盖默认的圆形拇指滑块，并制作一个更长方形的滑块。我从这里得到了密码：

但是，我实现的代码在safari或chrome上无法正常工作。圆形拇指仍然在那里，但我可以看到它周围盒子的阴影。有人能解释一下我该怎么解决这个问题吗

以下是css代码：

/* CSS declarations go here */
input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

input[type=range]::-webkit-slider-thumb {
    transform: rotate(90deg);
  -webkit-appearance: none;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
    transform: rotate(90deg);

  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
    transform: rotate(90deg);

  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

.slider-box {
  width: 50px;
  float: left;
}

.slider-box.first {

  margin-right: 25px;
}

.result-box {
  float: left;
}

---

下面是一个显示我的错误的例子

我不知道为什么，但似乎

-webkit的外观：滑块垂直优先于
-webkit外观：无
对我来说毫无意义，正如google chrome inspector所说，
-webkit外观：滑块垂直
具有索引32，而
-webkit外观：无具有索引41