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);}
       }
相关推荐
m0_5485147711 分钟前
前端Pako.js 压缩解压库 与 Java 的 zlib 压缩与解压 的互通实现
java·前端·javascript
AndrewPerfect11 分钟前
xss csrf怎么预防?
前端·xss·csrf
Calm55014 分钟前
Vue3:uv-upload图片上传
前端·vue.js
浮游本尊19 分钟前
Nginx配置:如何在一个域名下运行两个网站
前端·javascript
m0_7482398319 分钟前
前端bug调试
前端·bug
m0_7482329222 分钟前
[项目][boost搜索引擎#4] cpp-httplib使用 log.hpp 前端 测试及总结
前端·搜索引擎
新中地GIS开发老师27 分钟前
《Vue进阶教程》(12)ref的实现详细教程
前端·javascript·vue.js·arcgis·前端框架·地理信息科学·地信
m0_7482495429 分钟前
前端:base64的作用
前端
html组态35 分钟前
web组态可视化编辑器
前端·物联网·编辑器·web组态·组态·组态软件
~央千澈~42 分钟前
如果你的网站是h5网站,如何将h5网站变成小程序-除开完整重做方法如何快速h5转小程序-h5网站转小程序的办法-优雅草央千澈
前端·apache