Firefox方向垂直的HTML5输入类型范围？答案

【问题标题】：HTML5 input type range for firefox orientation vertical?Firefox方向垂直的HTML5输入类型范围？
【发布时间】：2015-01-09 07:02:15
【问题描述】：

想知道是否有人知道在 FireFox 中是否可以使用 input 类型范围的垂直方向。

我知道在 Chrome 和 Safari 中你可以做到：

-webkit-appearance: slider-vertical;

我在 FireFox 中尝试过这样的事情：

HTML

<input type="range" name="range" min="0" max="9" step="1" value="3" />

CSS

input[name=range] {
  width: 150px;
  height: 10px;
  -moz-transfrom: rotate(270deg);
}

即使这确实产生了我想要的效果，input 默认指针范围的方向仍然需要左右拖动才能改变，而不是像预期的那样上下拖动。

这是Example，必须在 FireFox 中查看。

任何关于该主题的新的和令人兴奋的信息将不胜感激，谢谢！

【问题讨论】：

这听起来更像是一个错误。考虑提交一份关于 Bugzilla 的报告，看看他们怎么说。
添加border:0; 样式让它们更漂亮

标签： css html firefox input

【解决方案1】：

看起来在最近的 Firefox 更新中，他们已经解决了这个问题。这是更新的fiddle

<input type="range" name="range" min="0" max="9" step="1" value="3" />

还有 CSS

input[name=range] {
    position:relative;
    top: 100px;
    width: 150px;
    height: 10px;
    border: 0

    -webkit-transform: rotate(270deg);
       -moz-transform: rotate(270deg);
            transform: rotate(270deg);
}

【讨论】：

【解决方案2】：

Firefox 不支持<input type="range">。您的示例使用fryn's slider polyfill，因此您需要在fryn 的github 问题跟踪器上提交一个错误。

【讨论】：

【解决方案3】：

您是否考虑过查看 jqueryui 滑块的实现？ http://jqueryui.com/demos/slider/#slider-vertical

【讨论】：

这是我最后的手段，但是非常好的实现。我喜欢 jQuery！
在每一个问题上都不要扔 jQuery。