input range样式优化
2018-06-24 02:01:49来源:未知 阅读 ()
首先HTML代码:
1 <input id="snrPollInterval" type="range" min="1" max="30">
css代码:
1 input[type="range"] { 2 /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/ 3 -webkit-appearance: none; /*去除默认样式*/ 4 margin-top: 42px; 5 background-color: #ebeff4; 6 /*border-radius: 15px;*/ 7 width: 80% !important; 8 -webkit-appearance: none; 9 height:4px; 10 padding: 0; 11 border: none; 12 13 /*input的长度为80%,margin-left的长度为10%*/ 14 } 15 input[type="range"]::-webkit-slider-thumb { 16 -webkit-appearance: none;/*去除默认样式*/ 17 cursor: default; 18 top: 0; 19 height: 20px; 20 width: 20px; 21 transform: translateY(0px); 22 /*background: none repeat scroll 0 0 #5891f5;*/ 23 background: #fff; 24 border-radius: 15px; 25 border: 5px solid #006eb3; 26 /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/ 27 }
效果如下:
拖动的时候,颜色从左往右变化,此处用了jQuery,注意引入jQuery
1 //滑动时的样式 2 $.fn.RangeSlider = function(cfg){ 3 this.sliderCfg = { 4 min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, 5 max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null, 6 step: cfg && Number(cfg.step) ? cfg.step : 1, 7 callback: cfg && cfg.callback ? cfg.callback : null 8 }; 9 10 var $input = $(this); 11 var min = this.sliderCfg.min; 12 var max = this.sliderCfg.max; 13 var step = this.sliderCfg.step; 14 var callback = this.sliderCfg.callback; 15 16 $input.attr('min', min) 17 .attr('max', max) 18 .attr('step', step); 19 20 $input.bind("input", function(e){ 21 $input.attr('value', this.value); 22 $input.css( 'background', 'linear-gradient(to right, #059CFA, #ebeff4 ' + this.value + '%, #ebeff4)' ); 23 24 if ($.isFunction(callback)) { 25 callback(this); 26 } 27 }); 28 }; 29 $('#snrPollInterval').RangeSlider({ min: 0, max: 100, step: 1, callback: ''});//#snrPollInterval为input的id名
效果图如下:
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题 2020-05-31
- css:chorm调试工具(修改样式、重置缩放比例、错误提示) 2020-05-30
- 美化博客园样式 2020-05-17
- 9.使用CSS样式,自己制作单选框样式和选中功能 2020-04-11
- css 自定义滚动条样式 2020-04-07
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash