Question

我想在垂直方向上自定义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;
}

Answer 1

******更新回答****

如果我理解正确的话，你是想让你垂直看起来像水平的样子？如果是的话：

    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＆lt; - 更新

如何自定义hss5输入范围滑块垂直css？

1 个答案: