如何仅使用 css 自定义 html5 输入范围滑块垂直?

2022-01-24 00:00:00 input range slider html css

我想自定义 html5 输入[范围] 在垂​​直时的外观.

I would like to customize the look of a html5 input[range] when it's vertical.

想要避免像 transform:rotate 这样的 CSS 3 指令，它会使 UI 布局变得复杂.

Want to avoid CSS 3 directive like transform:rotate, it complicates the UI layout then.

Webkit css 属性在我的上下文中被识别，其他供应商在我的情况下无用.

Webkit css properties are recognised in my context, the others vendors are useless in my case.

自定义对水平默认滑块效果很好，但不适用于垂直滑块，您可以在这里查看:

The customisation works good for the horizontal default slider, but not for the vertical one, you can look at here :

jsFiddle:http://jsfiddle.net/QU5VD/1/

否则，这是代码:

HTML

<input type="range" class="vHorizo​​n"/>

<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;
}

推荐答案

******更新答案****

******UPDATED ANSWER****

如果我理解正确，你是想让你的垂直看起来像你的水平看起来一样吗?如果是这样:

If i understand you correctly, you are trying to make you vertical look like what your horizontal looks like? if so:

    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;
}

小提琴 <--更新

相关文章