我想自定义 html5 input[range] 垂直时的外观。
想要避免 CSS 3 指令,例如 Transform:rotate,它会使 UI 布局变得复杂。
Webkit css 属性在我的上下文中被识别,其他供应商在我的情况下毫无用处。
自定义适用于水平默认滑块,但不适用于垂直滑块,您可以查看此处:
js小提琴: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 <--UPDATED
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)