input 新属性type="range"

一时失言乱红尘 2022-05-26 01:27 214阅读 0赞

因为之前写了一个模拟的音乐播放器，所以对这个input的新属性稍微关注了一下，功能还是很强大的。

type="range" 直接显示一个滑块控件，可拖动。

不过很多时候这个样式不太能满足我们项目的需求，所以这里可以适当调整一下。

修改前样式：![201804222020033][]

修改后样式：![20180422201901423][]

作为一个拿来主义者，代码给你们：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>input样式调整</title>
    		<style type="text/css">
    			input[type=range]:focus {/*清除点击时的input边框*/
    			    outline: none;
    			}
    			input[type=range] {  
    				cursor: pointer;
    			  -webkit-appearance: none;/*清除系统默认样式*/  
    			  width: 200px;
    			  height: 10px;  
    			  background: #ddd;
    			  background: -webkit-linear-gradient(top, rgb(97, 189, 18), rgb(97, 189, 18)) 0% 0% / 40% 100% no-repeat rgb(221, 221, 221);
    			  height: 10px;/*横条的高度*/  
    			}  
    			/*拖动块的样式*/  
    			input[type=range]::-webkit-slider-thumb {  
    			  -webkit-appearance: none;/*清除系统默认样式*/  
    			  height: 10px;/*拖动块高度*/  
    			  width: 10px;/*拖动块宽度*/  
    			  background: #fff;/*拖动块背景*/  
    			  border-radius: 5px; /*外观设置为圆形*/  
    			  border: solid 1px #ddd; /*设置边框*/  
    			}
    		</style>
    	</head>
    	<body>
    		<input type="range"  />
    	</body>
    </html>

参考博客： [https://blog.csdn.net/u013347241/article/details/51560290][https_blog.csdn.net_u013347241_article_details_51560290]

[201804222020033]: /images/20220526/ae03afb9a4f94c019a9d0fc48a6f7fd7.png
[20180422201901423]: /images/20220526/40b83fbe1e264ece876d65043776936b.png
[https_blog.csdn.net_u013347241_article_details_51560290]: https://blog.csdn.net/u013347241/article/details/51560290