Alfalfa  you name ? 



家中独我一人矣。
如何垂直显示(范围)滑块

实现方式一:

对于Chrome,请使用 -webkit-appearance: slider-vertical。
对于IE,请使用 writing-mode: bt-lr。
对于Firefox,添加一个 orient="vertical" 属性为html。可惜在最新的 Firefox 无法正常显示且无法操控。
完整代码:

input[type=range][orient=vertical]
{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 175px;
padding: 0 5px;
}
<input type="range" orient="vertical" />


实现方式二:

但是要注意容器的宽度/高度

input[type="range"] {
position: absolute;
top: 40%;
transform: rotate(270deg);
}
<input type="range"/>

或等效的3d变换:

input[type="range"] {
transform: rotateZ(270deg);
}


实现方式三:

.vranger {
margin-top: 50px;
transform: rotate(270deg);
-moz-transform: rotate(270deg); /*do same for other browsers if required*/
}
<input type="range" class="vranger"/>

对于非常旧的浏览器,您可以使用 -sand-transform: rotate(10deg)
或使用
前缀选择器如 -ms-transform: rotate(270deg); 对于IE9



你可能还会对下面的内容感兴趣:

Music List
0:00
Artist
MUsic Title
啦啦啦