如何在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中控制范围输入旋钮的形状？

回答

相关问题