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);}
       }
相关推荐
用户0595401744621 分钟前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css
满栀58530 分钟前
状态管理:Redux、Vuex、Pinia 核心区别
前端·javascript·typescript
一拳不是超人1 小时前
DeepSeek Harness 为什么敢说"一切皆插件"?拆透 Cordis 引擎的五大核心机制
前端·人工智能·agent
IT_陈寒1 小时前
Python的GIL让我多写了500行代码
前端·人工智能·后端
风骏时光牛马1 小时前
AI智能体能力调度微服务
前端
Eloudy3 小时前
ReAct 原理简介
前端·javascript·人工智能·react.js·agent·gpu
ZJU_统一阿萨姆4 小时前
【DSH】如何将 DeepSeek Harness 嵌入生产环境?万字解构 DeepSeek Agent Harness 的运行机制与安全边界
前端·javascript·安全
用户921080262864 小时前
4. 前端地图大量点位实时更新优化:后端推增量,前端做 diff
前端
SoaringHeart4 小时前
Flutter最佳实践:Web项目中文字体首次加载乱码问题解决
前端·flutter
西安小哥5 小时前
破局与重生:大厂前端如何借力 AI 转型“超级全栈“
前端·人工智能