输入范围样式神秘地改变了

时间:2014-01-12 15:46:07

标签: html5 css3 firefox input range

我已尝试为我的input type range网页设置样式。不幸的是,我看到一个圆形滑块按钮而不是默认的子弹。当然它看起来不错,但无法弄清楚它的来源。

我在mozilla firefox中看到了这一点。

这是Fiddle link

编辑:刚发现这是因为background-color的变化。但是,如果background-color发生变化,为什么滑块子弹样式会发生变化。

1 个答案:

答案 0 :(得分:0)

滑块的默认渲染是使用OS本机主题完成的:浏览器要求操作系统只在屏幕上的特定位置绘制滑块控件。

但是如果你改变了背景,那个实现策略就不再适用了,因为你不能像操作系统一样绘制一个滑块控件,它具有与默认滑块控件不同的背景(至少不能跨越所有操作系统)。所以在这一点上,浏览器将依赖于绘制控件本身。它会尝试在某种程度上使它看起来像操作系统默认渲染,但它无法可靠地执行此操作,因为操作系统默认渲染可能非常随意,具体取决于您启用的操作系统主题...