html5可拖動的滾動條樣式修改
阿新 • • 發佈：2019-01-28
關於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>