我希望在垂直时自定义
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< - 更新
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。