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

Posted 2023-03-05

【中文标题】如何在 Firefox 中控制范围输入旋钮的形状？

【英文标题】：How to control the shape of the range input knob in Firefox?

【发布时间】：2014-12-30 11:59:18

【问题描述】：

警告：下面的原始问题文本具有误导性。

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

---

html5范围输入控件：

<input type="range" />

以前在 Firefox 中大致是这样的：

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

原始设计与我们网站的外观和感觉完美匹配。现在的那个看起来很不合适。

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

【问题讨论】：

你可以看看这个：webdesign.tutsplus.com/tutorials/…（“样式”部分）

@M.Page 上面写着：“不幸的是，Opera 和 Firefox 只会显示标准范围滑块。”这似乎已经过时了，因为 Firefox 似乎支持::-moz-range-track and ::-moz-range-thumb。但他们不知道是否可以控制形状。

【参考方案1】：

是的，您可以使用::-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;

【讨论】：

有趣 - 似乎分配 background ::-moz-range-track 会使旋钮变圆，而从 ::-moz-range-track 中删除样式则完全使其再次变得尖尖。我很确定我没有对该元素应用任何样式。所以应该有其他东西可以应用它，我需要看看。

感谢您对正确方向的提示，我找到了问题。

【参考方案2】：

在 Firefox 33.0.2 中 Range 输入控件的外观实际上并没有改变 - 很抱歉造成混淆。

发生的情况是 border: CSS 规则意外应用于 input[type="range"]，它没有显示为可见边框，因为它后来被 border: initial 重置。

应用边框这一事实使范围控件进入主题模式，在该模式下它会绘制一个圆形旋钮（我不知道这种模式）。

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

【参考方案3】：

见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/ 等。