火狐浏览器中的HTML5输入范围类型是否支持垂直方向？

Question

想知道是否有人知道在 FireFox 中是否可以垂直定位 input 类型的范围。

我知道在 Chrome 和 Safari 中可以这样做：

-webkit-appearance: slider-vertical;

And I tried something like this in 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 的默认指针方向仍然需要左右拖动才能更改，而不是预期的上下。 这里有一个示例，必须在FireFox中查看。如有任何关于此主题的新的令人兴奋的信息，将不胜感激。谢谢！

- Romes

---

这听起来更像是一个漏洞。考虑在Bugzilla上提交报告，看看他们会说什么。 - BoltClock

添加 border:0; 样式可以使它们更漂亮。 - aelgoa

Answer 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);
}

- Romes

Answer 2

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

- csupnig

---

这是我的最后一招，但非常好的实现。我喜欢jQuery！ - Romes

不要把 jQuery 套在每个问题上。 - Rob

Answer 3

Firefox支持orient="vertical"属性：

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

但是Chrome不支持。

- Matthieu

Answer 4

Firefox不支持<input type="range">。您的示例正在使用{{link1：fryn的滑块填充程序}}，因此您需要在fryn的GitHub问题跟踪器上提交错误。

- Dirk Bergstrom

---

火狐浏览器确实支持<input type="range">，那它不支持什么呢？ - Matthieu