< input type =" range">风格在垂直时不适用于拇指 [英] <input type="range"> style not applies to thumb when it is vertical
问题描述
我正在创建垂直范围栏，我改变了 -webkit-appearance：slider-vertical。
i am creating vertical range bar and i changed the -webkit-appearance : slider-vertical.
我还更改了输入范围栏的属性，如height，width，webkit-slider-runnable-track和webkit-slider-thumb属性。
I also changed the input-range bar's properties such as height , width ,webkit-slider-runnable-track and webkit-slider-thumb properties.
所有输入范围属性已更改，但 webkit-slider-thumb 除外。它设置为默认属性。我甚至在webkit-slider-thumb中将webkit-appearance更改为none。
all the input range properties changed except the webkit-slider-thumb. It was set to the default property. I even changed the webkit-appearance to none inside the webkit-slider-thumb.
在线代码： 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纵向< input type =" range" /> ]了解更多信息。
I afraid it's not possible. See [Google chrome vertical <input type="range" /> ] for more info.
但有一个很好的技巧。 https://css-tricks.com/ style-cross-browser-compatible-range-inputs-css /＃comment-1586472
But there is a nice trick. 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" />
这篇关于< input type =" range">风格在垂直时不适用于拇指的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
