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

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

免责声明：

此解决方案基于尚未html" target="_blank">定义或未完成的CSS属性的当前浏览器实现。如果打算在代码中使用它，请 准备 在发布较新的浏览器版本并完成w3c建议时
进行代码调整 。

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

为在垂直滑块演示标题IE文档错误地表示比宽度将显示范围滑块垂直该设置高度大，但这并
_不_工作。在[代码部分中])，它显然不设置高度或宽度，而是使用writing- mode。由IE实现的writing-mode属性非常强大。可悲的是，在撰写本文时，规范的当前工作草案中定义的值要有限得多。如果IE的将来版本放弃对的建议，而现在提出的建议（相当于），则滑块将倒置显示。将来的版本很可能会扩展bt-lr``vertical-lr``tb-lr``writing-mode接受新的价值，而不是放弃对现有价值的支持。但是，很高兴知道您正在处理什么。