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);}
       }
相关推荐
小码哥_常1 分钟前
Kotlin开发秘籍:解锁Android编程新姿势
前端
ETA86 分钟前
页面卡顿的元凶:可能是你没搞懂事件循环(面试可用)
前端·浏览器
毛骗导演7 分钟前
OpenClaw 技能系统源码解析:一个 Markdown 文件是怎么变成 AI 的能力的
前端·架构
kyriewen7 分钟前
当 JavaScript 试图做加法:一场混乱的“相亲”大会
前端·javascript·html
cxxcode9 分钟前
Node.js 进程间通信(IPC)方式总结
前端
Mintopia11 分钟前
Client Time 与 Server Time:分布式系统中的时间一致性与落地实践
前端·架构
ETA814 分钟前
浏览器渲染机制与优化实战
前端·浏览器
柏箱18 分钟前
文件上传漏洞入门:(upload-labs Pass-1 & Pass-2)
开发语言·前端·javascript
李剑一19 分钟前
Cesium 海量点位不卡顿!图标动态聚合效果深度解析,看完直接抄代码!
前端·vue.js·cesium