html - 如何垂直显示范围输入 slider

Question

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

我发现一些评论和引用资料似乎表明将高度设置为大于宽度会导致浏览器自动更改方向，但在我的测试中，只有 在 Opera 中有效曾经在 Opera 工作，但现在不在了。如何垂直定位 HTML5 范围 slider ？

Answer 1

首先，设置高度大于宽度。从理论上讲，这就是您所需要的。 HTML5 Spec suggests as much :

... the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties.

Opera 以这种方式实现，但 Opera 现在使用 WebKit Blink .到今天为止，没有浏览器仅基于高度大于宽度来实现垂直 slider 。现在that suggestion is under review by WHATWG .

无论如何，需要将高度设置为大于宽度才能在浏览器之间获得正确的布局。应用左右内边距也有助于布局和定位。

对于 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; /* Chromium */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

<input type="range" orient="vertical" />

---

免责声明:

此解决方案基于目前的浏览器实现 仍然未定义或未最终确定的 CSS 属性。如果您打算在您的代码中使用它，请准备好进行代码调整，因为更新的浏览器版本已发布并且 WHATWG 建议已完成。订阅this github issue在他们最终决定使用 CSS 属性正式控制幻灯片方向时获取更新。

MDN contains a warning关于在网络上使用 -webkit-appearance:

Note: If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

尽管有这些警告，这个答案现在已有将近 9 年的历史，而且建议基本保持不变。