Question

所以我使用HTML5 / CSS3为输入范围滑块创建了一个样式。一切正常，除了Firefox中的填充百分比（填充到可拖动按钮的位）。它适用于Chrome。我已经尝试过所有可以帮助我在Firefox中使用它的一切。继承人我所拥有的：

CSS：

.my-retirement-sliders input[type='range']::-moz-range-track {
             -moz-appearance: none;
             border-radius: 5px;
             border:none;
             height: 6px;
             background-image: -webkit-gradient(
                linear,
                left top,
                right top,
                color-stop(0.15, #94A14E),
                color-stop(0.15, #C5C5C5)
            );
        }

        .my-retirement-sliders input[type='range']::-moz-range-thumb {
             -moz-appearance: none;
             background: rgb(148, 161, 78);
             border: 3px solid #fff;
             height: 10px;
             width: 10px;
        }

        .my-retirement-sliders input[type="range"]{
            -webkit-appearance: none;
            border-radius: 5px;
            height: 6px;
            background-color: #444;
            background-image: -webkit-gradient(
                linear,
                left top,
                right top,
                color-stop(0.15, #94A14E),
                color-stop(0.15, #C5C5C5)
            );
        }

        .my-retirement-sliders input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none;
            background-color: rgb(148, 161, 78);
            border: 3px solid #fff;
            border-radius:10px;
            height: 15px;
            width: 15px;
        }

JS的一点点：

//SLIDERS  
        //SET START POINT FOR SLIDERS FILL 
        var val = ($("#SliderRetAge").val() - $("#SliderRetAge").attr('min')) / ($("#SliderRetAge").attr('max') - $("#SliderRetAge").attr('min'));
        $("#SliderRetAge").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');

        var val = ($("#SliderPostRetExpPerc").val() - $("#SliderPostRetExpPerc").attr('min')) / ($("#SliderPostRetExpPerc").attr('max') - $("#SliderPostRetExpPerc").attr('min'));
        $("#SliderPostRetExpPerc").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');

        //CHANGE FILL %
        $('input[type="range"]').change(function () {
            var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
            $(this).css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
        });

Answer 1

所以我现在也设法为Firefox修复它：D快乐的日子！所以我的CSS看起来像这样

/* Firefox */
    .my-retirement-sliders input[type='range']::-moz-range-track {           
         border:none;
         background:transparent;
    }

    .my-retirement-sliders input[type='range']::-moz-range-thumb {
         -moz-appearance: none;
         background: rgb(148, 161, 78);
         border: 4px solid #fff;
         border-radius:10px;
         height: 13px;             
         width: 13px;
         box-shadow:black 2px 2px 10px;
    }        

    /* Chrome and Opera */
    .my-retirement-sliders input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        background-color: rgb(148, 161, 78);
        border: 4px solid #fff;
        border-radius:15px;
        height: 20px;
        width: 20px;
        box-shadow:black 1px 1px 5px;
    }

    /* IE */
    .k-ie .my-retirement-sliders input[type="range"]{
        height:81px;
        top:10px;
        position:relative;
        width:300px;
        margin-left: 10px;
        display: inline-block;
    }

    .k-ie .my-retirement-sliders input[type="range"]::-ms-track { 
        border-radius:10px; 
        height:5px;      
    }

    .k-ie .my-retirement-sliders input[type="range"]::-ms-fill-lower {
        background: #94A14E;
        border-radius:10px;  
        height:5px;        
    }

    .k-ie .my-retirement-sliders input[type="range"]::-ms-fill-upper {
        background: #C5C5C5;
        border-radius:10px;  
        height:5px;           
    } 

    .k-ie .my-retirement-sliders input[type="range"]::-ms-thumb {
        background-color: rgb(148, 161, 78);
        border: 4px solid #fff;
        border-radius:15px;
        height: 15px;
        width: 15px;
        box-shadow:black 1px 1px 5px;          
        overflow:auto;            
    }

和JS看起来像这样：

//SLIDERS  
        //SET START POINT FOR SLIDERS FILL 
        var val = ($("#SliderRetAge").val() - $("#SliderRetAge").attr('min')) / ($("#SliderRetAge").attr('max') - $("#SliderRetAge").attr('min'));

        $("#SliderRetAge").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');       
        $("#SliderRetAge").css('background-image', '-moz-linear-gradient(left, #94A14E ' + val*100 + '% , #C5C5C5 ' + val*100 + '%)');

        var val = ($("#SliderPostRetExpPerc").val() - $("#SliderPostRetExpPerc").attr('min')) / ($("#SliderPostRetExpPerc").attr('max') - $("#SliderPostRetExpPerc").attr('min'));
        $("#SliderPostRetExpPerc").css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
        $("#SliderPostRetExpPerc").css('background-image', '-moz-linear-gradient(left, #94A14E ' + val * 100 + '% , #C5C5C5 ' + val * 100 + '%)');

        //CHANGE FILL %
        $('input[type="range"]').change(function () {
            var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
            $(this).css('background-image', '-webkit-gradient(linear, left top, right top, ' + 'color-stop(' + val + ', #94A14E), ' + 'color-stop(' + val + ', #C5C5C5)' + ')');
            $(this).css('background-image', '-moz-linear-gradient(left, #94A14E ' + val * 100 + '% , #C5C5C5 ' + val * 100 + '%)');
        });

HTML5 / CSS3输入范围样式

1 个答案: