HTML输入范围Firefox中的样式 [英] HTML input range Style in Firefox

问题描述

 < input type =rangeid =difficultSelectmax =3min =1value =2/> 
  

css看起来像这样：

  -webkit-appearance：none; 
 z-index：102; 
 width：225px; 
 height：5px; 
 margin-left：95px; 
 margin-top：15px; 
 border-radius：2px; 
 
背景：线性渐变（向右，＃83f922 0％，＃ff4c00 100％）; 
背景：-webkit-gradient（线性，左上角，右上角，颜色停止（0％，＃83f922），
颜色停止（100％，＃ff4c00））; 
 background：-moz-linear-gradient（left，＃83f922 0％，＃ff4c00 100％）; 
 background：-webkit-linear-gradient（left，＃83f922 0％，＃ff4c00 100％）; 
  

你可以看到，滑块的背景应该显示从绿色到红色的线性渐变。
在Chrome浏览器中按预期方式显示，但在Firefox中有背景渐变，但其上面是滑块的正常灰色栏： http://imgur.com/xcxuZXV

是我的错吗？ Firefox版本ist 27.0.1

THANKS

解决方案

独立的属性风格的投影阴影（这是什么 -webkit-appearance：none; 照顾webkit）：

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

另外， thumb：

  / *这些需要分开，而不是用逗号组合* / 
 ::  -  webkit- slider-thumb {/ * ... * /} 
 ::  -  moz-range-thumb {/ * ... * /} 
  

I´ve got a CSS problem with a input-range element:

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

the css looks like this:

-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%); 

As u can see, the background of the slider should show a linear-gradient from green to red. In Chrome it displays as intended, but in Firefox there is the background-gradient, but ontop of it is the normal "grey" bar of the slider: http://imgur.com/xcxuZXV

Were is my mistake? Firefox Version ist 27.0.1

THANKS

解决方案

Mozilla has a separate property to style the shadow dom of the input (which is what -webkit-appearance:none; takes care of for webkit):

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

On a side note, you can also style the slide/grip/button/thumb:

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

这篇关于HTML输入范围Firefox中的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！