Question

使用-moz和-webkit设置垂直滑块的样式。使用mozilla，我使用orient =“vertical”声明它是垂直的，并且所有样式都可以正常工作。使用chrome，因为我使用-webkit-appearance：none;为了样式我不能使用-webkit-appearance：slider-vertical，这迫使我使用-webkit-transform：rotate（90deg）;

问题是在mozilla中我可以使用高度来声明滑块的实际高度，而不是通过使用chrome旋转它来强制使用宽度。

#sens[type=range]{
    -webkit-appearance: none;
     height: 220px; //in chrome is width since it is rotated
}

我该如何解决这个问题？

Answer 1

好吧，我认为你需要这样的东西。

首先，您需要了解::-webkit-slider-runnable-track和::webkit-slider-thumb。 link1和link2非常有用的属性。

现在你可以这样做：

input[type=range] {
  -webkit-appearance: none;
  -webkit-transform: rotate(90deg);
  margin-top: 50px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: #ccc;
  border: none;
  border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: red;
  margin-top: -5px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ddd;
}

<input type="range" />

铬和钼的垂直滑块

1 个答案: