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);}
       }
相关推荐
JustHappy3 分钟前
「Versakit 0.3 重磅发布」 两个月开发成果全揭!
前端·javascript·vue.js
carterwu9 分钟前
是否使用原子式tailwindcss 代替css module?
css
chenqi13 分钟前
WebGPU和WebLLM:在浏览器中解锁端侧大模型的未来
前端·人工智能
Lingxing14 分钟前
Vue组件树:从设计到实现的全方位指南 🚀
前端·vue.js
玖玖passion15 分钟前
leader:请你用Protobuf进行数据交互🥲
前端
Linruoxin19 分钟前
为什么给 body 设置背景会直接铺满整个视口?
前端·css
Jenlybein22 分钟前
Vue3 权限控制:利用动态路由与自定义指令
前端·vue.js
codelang2 小时前
Cline + MCP 开发实战
前端·后端
好_快3 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快3 小时前
Lodash源码阅读-toString
前端·javascript·源码阅读