用于Firefox的垂直方向的HTML5输入类型范围？

想知道是否有人知道在FireFox中是否可以在input类型范围内垂直定位。用于Firefox的垂直方向的HTML5输入类型范围？

我知道在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中查看。

关于这个问题的任何新的和令人兴奋的信息将非常感激，谢谢！

来源

2011-12-07 Romes

这听起来似乎比什么都重要的错误。考虑向Bugzilla提交报告，看看他们说了些什么。 – BoltClock

加入'border：0;'风格让它们更漂亮 – aelgoa

它看起来像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); 
}

来源

2015-01-08 23:02:15 Romes

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

来源

2011-12-07 18:02:50 csupnig

这是我最后的手段，但是很好的实现。我喜欢jQuery！ – Romes

+22

退出在每个问题抛出jQuery。 – Rob

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

来源

2012-01-27 17:33:41

用于Firefox的垂直方向的HTML5输入类型范围？

回答

相关问题