Диапазон ввода HTML Стиль в Firefox

Question

Диапазон ввода HTML Стиль в Firefox

0

У меня проблема с 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 есть фоновый градиент, но на нем находится обычная "серая" полоса слайдера: http://imgur.com/xcxuZXV

Была ли моя ошибка? Версия Firefox ist 27.0.1

БЛАГОДАРЯ

Scarysize 02 апр. 2014, в 20:05

Источник

Теги:

javascript

html

css

firefox

1 ответ

Ещё вопросы

rgthree · Accepted Answer · 2014-04-02T15-44-00.000Z

Mozilla имеет отдельное свойство для стиля теневого -webkit-appearance:none; ввода (что и есть -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  { /* ... */}

просто бей меня :) вот скрипка в действии: jsfiddle.net/6ppnT