用於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輸入類型範圍？

回答

相關問題