如何在Firefox中控制範圍輸入旋鈕的形狀？

警告：下面的原始問題文本是誤導性的。如何在Firefox中控制範圍輸入旋鈕的形狀？

實際上Firefox 33.0.2中的範圍輸入控件的外觀沒有改變。

的HTML5範圍輸入控制：

<input type="range" />

用來粗略看起來像這樣在Firefox：
The great Firefox range control appearance

由於最新的更新，v33.0.2，它看起來像這樣：
enter image description here

原創設計與我們網站的外觀完美匹配。目前的這個看起來很不合適。

有沒有一種方法（CSS或Firefox配置設置）來強制原始尖尖的外觀？

來源

2014-11-03 GSerg

你可能會看看這個：http://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player--webdesign-7081（「風格」部分） – 2014-11-03 18:50:44

@ M.Page它寫道：「不幸的是，Opera和Firefox只會顯示標準範圍滑塊。「Firefox似乎支持[':: - moz-range-track'和':: - moz-range-thumb']似乎已經過時了（https://developer.mozilla.org/en-US/docs /用戶：Jonathan_Watt /範圍）他們不知道是否可以控制形狀 – GSerg 2014-11-03 18:56:33

的範圍輸入控件的外觀實際上並沒有在Firefox 33.0.2改變 - 遺憾的混亂。

發生了什麼事是一個border: CSS規則偶然應用於input[type="range"]，它沒有表現爲可見邊框，因爲它後來重置爲border: initial。

僅應用邊框的事實將範圍控制置於主題模式中，在該主題模式下將繪製圓形旋鈕（我不知道此模式）。

解決方案是確保border:不首先應用於控件。然後，它會看起來尖尖，因爲它應該。

來源

2014-11-03 19:21:37 GSerg

參見http://demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input。

你可以做這樣的事情

::-webkit-slider-thumb, ::-moz-range-thumb, ::-ms-thumb { 
    -webkit-appearance: none; 
    background-color: #666; 
    width: 10px; 
    height: 20px; 
}

也可能有所幫助：http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html，http://www.developerdrive.com/2013/09/how-to-style-range-sliders-in-webkit/，https://gist.github.com/afabbro/3759334，http://www.htmllion.com/html5-range-input-with-css.html，http://www.hongkiat.com/blog/html5-range-slider-style/等領域EC。

來源

2014-11-03 18:53:59

是的，您可以使用::-moz-range-track僞選擇器和::-moz-range-thumb僞選擇器。根據this site，您還需要給input[type=range]的寬度與軌道選擇器相同。

JSFiddle

CSS：

input[type=range] { 
    width: 300px; 
    } 
input[type=range]::-moz-range-track { 
    background: #dedede; 
} 
input[type=range]::-moz-range-thumb { 
    background: grey; 
    border-radius: 0px 0px 510px 510px; 
}

來源

2014-11-03 18:54:28 TylerH

有趣的是 - 分配背景'' - - moz-range-track'會使旋鈕變圓，從':: - moz-range-track'中刪除樣式完全讓它再次尖銳，我很確定我沒有對該元素應用任何樣式，所以應該有其他東西應用它，我需要有一看 – GSerg 2014-11-03 19:04:23

謝謝你正確的方向提示，我發現了這個問題。 – GSerg 2014-11-03 19:23:31

如何在Firefox中控制範圍輸入旋鈕的形狀？

回答

相關問題