为了账号安全,请及时绑定邮箱和手机立即绑定

如何设置HTML5范围输入的样式,使其在滑块前后具有不同的颜色?

/ 猿问

如何设置HTML5范围输入的样式,使其在滑块前后具有不同的颜色?

哈士奇WWW 2019-11-14 09:54:50

我希望左侧为绿色,右侧为灰色。如上图所示将是完美的。最好是一个纯CSS解决方案(只需要担心WebKit)。

这样的事情可能吗?


查看完整描述

3 回答

?
互换的青春

纯CSS解决方案:


Chrome:隐藏中的溢出input[range],并用阴影颜色填充拇指剩余的所有空间。

IE:无需重新发明轮子:::-ms-fill-lower

Firefox 无需重新发明轮子:::-moz-range-progress

/*Chrome*/

@media screen and (-webkit-min-device-pixel-ratio:0) {

    input[type='range'] {

      overflow: hidden;

      width: 80px;

      -webkit-appearance: none;

      background-color: #9a905d;

    }

    

    input[type='range']::-webkit-slider-runnable-track {

      height: 10px;

      -webkit-appearance: none;

      color: #13bba4;

      margin-top: -1px;

    }

    

    input[type='range']::-webkit-slider-thumb {

      width: 10px;

      -webkit-appearance: none;

      height: 10px;

      cursor: ew-resize;

      background: #434343;

      box-shadow: -80px 0 0 80px #43e5f7;

    }


}

/** FF*/

input[type="range"]::-moz-range-progress {

  background-color: #43e5f7; 

}

input[type="range"]::-moz-range-track {  

  background-color: #9a905d;

}

/* IE*/

input[type="range"]::-ms-fill-lower {

  background-color: #43e5f7; 

}

input[type="range"]::-ms-fill-upper {  

  background-color: #9a905d;

}

<input type="range"/>


查看完整回答
反对 回复 2019-11-14
?
慕运维8079593

对的,这是可能的。尽管我不建议这样做,因为input range并不是所有浏览器都正确地支持它,因为HTML5中添加了一个新元素,而HTML5只是一个草稿(并且将持续很长时间),因此就样式而言可能不是最好的选择。


另外,您还需要一些JavaScript。为了简单起见,我为此选择了使用jQuery库。


在这里,您可以访问:http : //jsfiddle.net/JnrvG/1/。


查看完整回答
反对 回复 2019-11-14
?
叮当猫咪

这是一个小更新:


如果使用以下内容,它将动态更新,而不是释放鼠标。


“更改mousemove”功能


<script>

$('input[type="range"]').on("change mousemove", 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 + ', #2f466b), '

                + 'color-stop(' + val + ', #d3d3db)'

                + ')'

                );

});</script>


查看完整回答
反对 回复 2019-11-14

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信