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);}
       }
相关推荐
PasserbyX11 分钟前
一句话解释JS链式调用
前端·javascript
1024小神12 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
Nano17 分钟前
前端适配方案深度解析:从响应式到自适应设计
前端
古夕22 分钟前
如何将异步操作封装为Promise
前端·javascript
小小小小宇22 分钟前
前端定高和不定高虚拟列表
前端
古夕33 分钟前
JS 模块化
前端·javascript
wandongle33 分钟前
HTML面试整理
前端·面试·html
liucan23334 分钟前
JS执行速度似乎并不比Swift或者C语言慢
前端·ios
一只小风华~36 分钟前
HTML前端开发:JavaScript 常用事件详解
前端·javascript·html
Revol_C38 分钟前
【调试日志】我只是用wangeditor上传图片而已,页面咋就崩溃了呢~
前端·vue.js·程序员