改变 input[type=range] css样式
生活随笔
收集整理的這篇文章主要介紹了
改变 input[type=range] css样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖：
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui, minimum-scale=1.0, maximum-scale=1.0"><title>type=range</title> </head> <style type="text/css"> .center{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex; -webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center; -ms-flex-align: center;-webkit-align-items: center;align-items: center;} .an_speed{width: 56%;} #value1{text-align:center;} input[type=range]{ margin-top: 8px;outline: none; -webkit-appearance: none;/*清除系統默認樣式*/ width:100% !important; background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ddd; background-size: 30% 100%;/*設置左右寬度比例*/ height: 3px;/*橫條的高度*/ } /*拖動塊的樣式*/ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;/*清除系統默認樣式*/ height:16px;/*拖動塊高度*/ width: 16px;/*拖動塊寬度*/ background: #fff;/*拖動塊背景*/ border-radius: 50%; /*外觀設置為圓形*/ border: solid 1px #ddd; /*設置邊框*/ } </style> <body> <div class="an_speed"><div class="center"><span>1</span><input type="range" name="range_speed" id="range_speed" min="0" max="10" value="5" oninput="changeSpeed()" /><span>10</span></div><h2 id="value1">5</h2> </div> </body> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript"> changeSpeed();function changeSpeed() {var value = $('#range_speed').val();var valStr = (value*10) + "% 100%";$('#value1').html(value);$('#range_speed').css({"background-size": valStr})}; </script> </html>
?
轉載于:https://www.cnblogs.com/Yjjhn/p/11404001.html
總結
以上是生活随笔為你收集整理的改变 input[type=range] css样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java内存缓存-通过Google Gu
- 下一篇： 两个不相同的类之间如果赋值