关于html5中, input标签的type="range"样式的修改:
下面综合一个小例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content=""/>
<meta name="description" content="" />
<title>CSS,Jquery精美进度条和滑动条插件</title>
<style type="text/css">
/*进度条的边框颜色 高 背景颜色*/
::-moz-range-track {
border: 1px solid green;
height: 20px;
background: #f0f3f9;
}
/*滑块的背景颜色和高 宽*/
::-moz-range-thumb {
background: red;
height: 70px;
width:10px;
border:2px solid blue;
}
input[type=range] {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
input[type=range]:focus {
outline: none;
}
/*轨道样式*/
input[type=range]::-webkit-slider-runnable-track {
height: 15px;
cursor: pointer;
animate: 0.2s;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
/*滑块的样式*/
input[type=range]::-webkit-slider-thumb {
height: 36px;
width: 16px;
border-radius: 3px;
background: #f0f0f0;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 15px;
cursor: pointer;
animate: 0.2s;
background: #3071a9;
border-radius: 1.3px;
}
input[type=range]::-moz-range-thumb {
border: 1px solid red;
height: 36px;
width: 16px;
border-radius: 3px;
background: #f0f0f0;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 15px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
/*ie下面滑块样式*/
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #f0f0f0;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
body,div,input{margin:0;padding:0;}
.ii{width:300px;}
.boxcoll{position:relative;margin:100px;}
.mycover{position:absolute;width:5px;background:red; height:15px;left:0px;top:0px;}
</style>
</head>
<body>
<div>
<input class="min" name="min" type="button" value="-" />
<input id="myvalue" class="text_box" value="10"/>
<input class="add" name="add" type="button" value="+" />
</div>
<div class="boxcoll">
<input class="ii" type="range" id="trackBar" min="0" max="500" step="10" value="10" />
<div class="mycover" id="mycover"></div>
</div>
</body>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</html>
<script type="text/javascript">
//当滑块里的值变化时,框里的值也变化
$('#trackBar').bind('input propertychange', function() {
var value = document.getElementById('trackBar').value ;
document.getElementById('myvalue').value = value;
var mm = 284/500*value;//284=300-16 即input宽度-滑块宽度 除以最大值乘以当前选择的值
$('#mycover').css('width',mm);
})
//当框里的值变化时,滑块位置变化
$('#myvalue').bind('input propertychange', function() {
change_num();
})
//当点击加减时候,框中数值发生改变
$(function(){
$(".add").click(function(){
var t=$(this).parent().find('input[class=text_box]');
t.val(parseInt(t.val())+10);
change_num();
if(parseInt(t.val())>500){
t.val(500);
}
})
$(".min").click(function(){
var t=$(this).parent().find('input[class=text_box]');
t.val(parseInt(t.val())-10);
change_num();
if(parseInt(t.val())<0){
t.val(0);
}
})
})
function change_num(){
var value2 = document.getElementById('myvalue').value ;
document.getElementById('trackBar').value = value2;
var mm = 284/500*value2;//284=300-16 即input宽度-滑块宽度 除以最大值乘以当前选择的值
$('#mycover').css('width',mm);
}
</script>