如何垂直显示范围输入滑块?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (22)

想展示一个<input type="range" />

提问于
用户回答回答于

对于Chrome,请使用-webkit-appearance: slider-vertical

对于IE,使用writing-mode: bt-lr

对于Firefox,添加一个orient="vertical"属性设置为html。可惜他们是这样做的。视觉样式应该通过CSS来控制,而不是HTML。

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" />

用户回答回答于

可以使用CSS转换来完成这个任务,但是要注意容器的高度/宽度。此外,可能需要将其放置在较低的位置:

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

或3D转换等效:

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

扫码关注云+社区