如何在Firefox中控制范围输入旋钮的形状？

Question

  

警告：以下原始问题文字具有误导性。

     

实际上，在Firefox 33.0.2中，范围输入控件的外观没有变化。

---

HTML5范围输入控件：

<input type="range" />

用于在Firefox中看起来大致如此：

自最新更新v33.0.2以来，它看起来像这样：

原创设计与我们网站的外观完美匹配。目前看起来很不合适。

是否有办法（CSS或Firefox配置设置）强制原始的尖头外观？

Answer 1

是的，您可以使用::-moz-range-track伪选择器和::-moz-range-thumb伪选择器。根据{{​​3}}，您还需要为input[type=range]提供与音轨选择器相同的宽度。

<强> this site

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

Answer 2

请参阅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。

Answer 3

在Firefox 33.0.2中，Range输入控件的外观实际上没有变化 - 抱歉让人感到困惑。

发生的事情是，border: CSS规则意外地应用于input[type="range"]，该规则未显示为可见边框，因为后来使用border: initial重置了该文件。

仅应用边框的事实将范围控制置于主题模式中，它将绘制一个圆形旋钮（我不知道此模式）。

解决方案是确保border:首先不应用于控件。然后它应该看起来很尖。