如何使用CSS填充拇指左侧的HTML5输入[type = range]？

是否有可能在Firefox上获得与::-ms-fill-lower相同的效果？没有使用JS？如何使用CSS填充拇指左侧的HTML5输入[type = range]？

为了在基于webkit的浏览器（例如谷歌浏览器）中使用伪元素：before和after，我已经找到了解决方法。但它不适用于Firefox元素。好像::-moz-range-thumb::before和::-moz-range-thumb::after不在Firefox的法律业务，而谷歌Chrome支持::-webkit-slider-thumb::before和::-webkit-slider-thumb::after

这里是基本的轮廓为Firefox的版本小提琴：

input[type="range"].slider-track { 
 
    border: none; 
 
    margin: 10px 0; 
 
    width: 100%; 
 
    height: 30px; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
    overflow-y: visible; 
 
    background: transparent; 
 
} 
 

 
input[type="range"].slider-track::-moz-range-thumb { 
 
    box-shadow: none; 
 
    border: 2px solid grey; 
 
    height: 16px; 
 
    width: 16px; 
 
    border-radius: 16px; 
 
    background: white; 
 
} 
 

 
input[type="range"].slider-track::-moz-range-track { 
 
    width: 100%; 
 
    height: 2px; 
 
    box-shadow: none; 
 
    background: blue; 
 
    border-radius: 0px; 
 
    border: 0px; 
 
}

<div style="max-width: 380px;"> 
 
    <input type="range" class="slider-track" id="mySlider1"></input> 
 
</div>

来源

2015-11-16 Rebecca

抱歉!我在发帖后20分钟找到答案...我整天都在搜索... 答案如下：

使用::-moz-range-progress元素！

例（作品为段）

input[type="range"].slider-track::-moz-range-progress { 
     background: red; 
}

来源

2015-11-16 15:28:02 Rebecca

该选择只在Firefox的工作，你有没有找到一个可行的解决方案也在Chrome和Safari中？ – Mikel

是的，我也发现了基于webkit的浏览器的apure CSS解决方案，但它只是一种解决方法。我将创建一个代码片段，并在此处发布一个新的Stack + Stack + Question + Answer，因为它对其他人也许很有趣。只要我有它，我会给你的链接:) – Rebecca

不适用于铬 –

你可以试试这个：

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

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

 
input[type='range']::-webkit-slider-thumb { 
 
    -webkit-appearance: none !important; 
 
    background-color: #E9E9E9; 
 
    border: 1px solid #CECECE; 
 
    height: 15px; 
 
    width: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" min="0" max="100" step="1" value="15">

来源

2017-05-26 14:49:23

如何使用CSS填充拇指左侧的HTML5输入[type = range]？

回答

相关问题