Question

想知道是否有人知道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中查看。

非常感谢有关此主题的任何新的令人兴奋的信息，谢谢！

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

Answer 2

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

Answer 3

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

HTML5输入类型范围为firefox方向垂直？

3 个答案: