HTML 输入范围 Firefox 中的样式

HTML input range Style in Firefox

本文关键字：样式 Firefox 输入 范围 HTML      更新时间：2023-09-26

我的输入范围元素有一个CSS问题：

<input type="range" id="difficultSelect" max="3" min="1" value="2"/>

CSS 看起来像这样：

-webkit-appearance: none;
z-index: 102;
width: 225px;
height: 5px;
margin-left: 95px;
margin-top: 15px;
border-radius: 2px;
background: linear-gradient(to right,  #83f922 0%,#ff4c00 100%); 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#83f922), 
    color-stop(100%,#ff4c00)); 
background: -moz-linear-gradient(left,  #83f922 0%, #ff4c00 100%);
background: -webkit-linear-gradient(left,  #83f922 0%,#ff4c00 100%);

如您所见，滑块的背景应显示从绿色到红色的线性渐变。在Chrome中，它按预期显示，但在Firefox中存在背景渐变，但其顶部是滑块的正常"灰色"条：https://i.stack.imgur.com/x1Z7Y.jpg

是我的错吗？火狐版本 ist 27.0.1

谢谢

Mozilla有一个单独的属性来设置输入的阴影dom样式（这是-webkit-appearance:none;为webkit负责的）：

::-moz-range-track {background:transparent; border:0px;}

在旁注中，您还可以设置幻灯片/握把/按钮/拇指的样式：

/* These need to be separated, not combined with a comma */
::-webkit-slider-thumb { /* ... */}
::-moz-range-thumb  { /* ... */}
相关文章：