我正在创建垂直范围条并且我更改了-webkit-appearance : slider-vertical。
我还更改了输入范围栏的属性，例如 height 、 width 、webkit-slider-runnable-track 和 webkit-slider-thumb 属性。
除了 webkit-slider-thumb 之外，所有输入范围属性都发生了变化。它被设置为默认属性。我什至将 webkit-slider-thumb 中的 webkit-appearance 更改为 none。
在线验证码:Jsfiddle
<head>
<style type="text/css">
input[type=range][orient=vertical] {
-webkit-appearance: none;
-webkit-appearance: slider-vertical;/*if we remove this slider-vertical then horizondally range bar styles applies correctly*/
width: 10%;
height: 40%;
}
input[type=range][orient=vertical]::-webkit-slider-runnable-track {
background: yellow;
border: 1px solid black;
}
input[type=range]::-webkit-slider-thumb {
/*all the below css properties **not** applies to thumb*/
height: 3vmin;
width: 3vmin;
border-radius: 50%;
background-color : black;
}
</style>
</head>
<body>
<input type="range" orient="vertical">
</body>
最佳答案
恐怕这是不可能的。参见 [ Google chrome vertical <input type="range" /> ] 了解更多信息。
但是有一个很好的技巧。 https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/#comment-1586472
input[type=range][orient=vertical] {
-webkit-appearance: none;
/*-webkit-appearance: slider-vertical; /*if we remove this slider-vertical then horizondally range bar styles applies correctly*/
width: 10%;
height: 40%;
transform: translateY(30px) rotate(90deg);
transform-origin:bottom;
}
input[type=range][orient=vertical]::-webkit-slider-runnable-track {
background: yellow;
border: 1px solid black;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: goldenrod;
margin-top: -4px;
}<input type="range" orient="vertical" />关于html - <input type ="range"> 垂直时样式不适用于拇指，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32312956/