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

Question

Warning: The original question text below is misleading.

In fact appearance of the range input control did not change in Firefox 33.0.2.

---

HTML5 范围输入控件:

<input type="range" />

过去在 Firefox 中大致是这样的:

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

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

有没有办法(CSS 或 Firefox 配置设置)强制显示原始的尖头外观？

Answer 1

Range 输入控件的外观在 Firefox 33.0.2 中实际上并没有改变 - 对于造成的混淆，我们深表歉意。

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

应用边框这一事实将范围控件置于主题模式，在该模式下它会绘制一个圆形旋钮(我不知道这种模式)。

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