我希望在垂直时自定义
html5输入[范围]的外观.
想要避免使用变换：旋转等CSS 3指令,那么它会使UI布局复杂化.
Webkit css属性在我的上下文中被识别,其他供应商在我的情况下是无用的.
自定义适用于水平默认滑块,但不适用于垂直滑块,您可以在此处查看：
jsFiddle：http://jsfiddle.net/QU5VD/1/
否则,这是代码：
HTML
< input type =“range”class =“vHorizon”/>
< input type =“range”class =“vVertical”/>
CSS
input[type="range"].vHorizon {
-webkit-appearance: none;
background-color: pink;
width: 200px;
height:10px;
}
input[type="range"].vVertical {
-webkit-appearance: slider-vertical;
background-color: pink;
width: 10px;
height:200px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: red;
width: 20px;
height: 20px;
}
解决方法
******更新的答案****
如果我理解正确的话,你会试着让你垂直看起来像你的水平样子？如果是这样：
input[type=range].vVertical {
-webkit-appearance: none;
background-color: green;
width: 200px;
height:10px;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
z-index: 0;
}
input[type=range].vHorizon {
-webkit-appearance: none;
background-color: pink;
height: 10px;
width:200px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: red;
width: 20px;
height: 20px;
}
fiddle< - 更新
