相关疑难解决方法(0)

我希望在垂直时自定义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;
}