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

Question

我想<input type="range" />垂直显示一个滑块控件.我只关心支持范围滑块控件的浏览器.

我发现一些注释和引用似乎表明设置高度大于宽度会导致浏览器自动更改方向,但在我的测试中,这只适用于以前在Opera中工作的Opera,但不再适用.如何垂直定位HTML5范围滑块？

Answer 1

首先,设置高度大于宽度.从理论上讲,这就是你应该需要的.在HTML5规格建议尽可能多的:

... UA根据样式表指定的高度和宽度属性的比率确定控件的方向.

Opera以这种方式实现了它,但Opera现在正在使用WebKit Blink.截至今天,没有浏览器实现仅基于高度大于宽度的垂直滑块.

无论如何,需要设置高于宽度的高度才能在浏览器之间进行布局.应用左右填充也有助于布局和定位.

对于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属性的当前浏览器实现.如果您打算在代码中使用它,请准备好在更新浏览器版本并完成w3c建议时进行代码调整.

MDN包含禁止-webkit-appearance在Web上使用的明确警告:

不要在Web站点上使用此属性:它不仅是非标准的,而且其行为从一个浏览器更改为另一个浏览器.即使关键字none在不同浏览器上的每个表单元素上也没有相同的行为,有些根本不支持它.

为在垂直滑块演示标题IE文档错误地表示设置高度大于宽度将垂直显示的范围内滑动件,但这不工作.在代码部分,它显然没有设置高度或宽度,而是使用writing-mode.由IE实施的该writing-mode属性非常强大.遗憾的是,截至本文撰写时,规范当前工作草案中定义的值更为有限.如果IE的未来版本不支持当前提出的支持(相当于),滑块将显示为颠倒.最有可能的是,未来版本会扩展接受新值而不是放弃对现有值的支持.但是,知道你在处理什么是很好的.bt-lrvertical-lrtb-lrwriting-mode

Answer 2

您可以使用css转换执行此操作,但要小心容器高度/宽度.您也可能需要将其放低:

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

<input type="range"/>

或等效的3d变换:

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

您还可以使用此方法分别将水平或垂直方向设置为180度或90度,以切换幻灯片的方向.

Answer 3

无需将位置更改为绝对位置,请参见下文.这也支持所有最近的浏览器.

.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);从CSS砂纸

或使用

前缀选择器,例如-ms-transform: rotate(270deg);IE9