css 修改 input range 样式

这段必须要加上,清除默认样式 ,根据mdn文档介绍,这个样式兼容性不太好,应该多看看目标用户的浏览器支不支持。

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

css 复制代码
		input[type='range']{-webkit-appearance: none;
			width:90px;
			height:5px;
			background:#303130;
			border-radius:4px;
			transform:rotate(90deg);
			transform-origin:100% 0%;}
        input[type="range"]::-webkit-slider-thumb { 
        	-webkit-appearance: none;
         	-moz-appearance: none; 
         	appearance: none;
         	width:50px;
         	height:5px;
         	background:linear-gradient(to right,#c1a068,#967a54);
         	cursor:pointer;
         	border-radius:3px;
            &:hover{background:linear-gradient(to right,#ccb58e,#967a54);}
            &:active{background:linear-gradient(to right,#967a54,#967a54);}
       }
相关推荐
jingling5556 分钟前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
Freedom风间5 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军6 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军6 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪6 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer6 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
山海上的风6 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发7 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中7 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron