HTML5输入范围样式之前 [英] HTML5 input range styling before
本文介绍了HTML5输入范围样式之前的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在使用以下代码来设置HTML5输入类型范围的样式:
I'm currently styling HTML5 input type range using below code:
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
width: 100%;
height: 8px;
padding: 0 20px;
background: #024069;
border-radius: 2px;
margin-top: 25px;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
-moz-apperance:none;
width:25px;
height:25px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-ms-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
border: 1px solid #787878;
}
这一切都很好.但是现在我尝试在实际的滑块上使用两种不同的颜色，以使拇指的左侧为蓝色，拇指的右侧为黑色.
This is all good. But now I'm trying to have two different colours on the actual slider so left of the thumb is blue and right of the thumb is black.
我尝试过:before，但是没有用.我们怎样才能做到这一点?
I tried :before but it didn't work. How can we achieve this?
推荐答案
以下是一些JavaScript，可在更改值时更新条形的颜色.
Here's some JavaScript that updates the colour of the bar when you change the value.
input.oninput = function () {
var value = (input.value - input.min)/(input.max - input.min);
input.style.backgroundImage = [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + value + ', blue), ',
'color-stop(' + value + ', red)',
')'
].join('');
};
onload = function() {
var inputs = document.querySelectorAll('input[type=range]');
for (var i = 0; i < inputs.length; i++) {
input = inputs[i]
input.oninput = function () {
var value = (input.value - input.min)/(input.max - input.min);
input.style.backgroundImage = [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + value + ', blue), ',
'color-stop(' + value + ', red)',
')'
].join('');
};
}
};body {
margin: 20px;
}
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
width: 200px;
height: 8px;
padding: 0;
border-left: 20px solid blue;
border-right: 20px solid red;
background: #024069;
border-radius: 2px;
margin-top: 25px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.2, blue),
color-stop(0.2, red)
);
outline: none;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
-moz-apperance:none;
width:25px;
height:25px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-ms-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
border: 1px solid #787878;
}<!doctype html>
<html>
<body>
<input type="range" min="1" max="100" step="1" value="20">
</body>
</html>感谢@adamvert建议使用 oninput 而不是 onchange .
Thanks to @adamvert for suggesting to use oninput instead of onchange.
这篇关于HTML5输入范围样式之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
