当前位置: 首页 > news >正文

如何让 -webkit-slider-thumb 生效

一、重点:

必须将-webkit-appearance: none同时应用于滑块拇指和滑块本身,-webkit-slider-thumb 才能生效

二、html只有一行

<input type="range" min="0" max="100" value="50" class="custom-slider">

三、css

.custom-slider {/*移除拇指默认外观*/-webkit-appearance: none;
}
/*滑块拇指*/
.custom-slider::-webkit-slider-thumb {/*移除拇指默认外观*/-webkit-appearance: none;/*设置颜色才能看到*/background: tan;/*如果轨道高度未设置, 拇指高度就会撑起轨道高度*/height: 20px;/*宽度默认占满, 限制到15%*/max-width: 15%;/*悬停光标手*/cursor: pointer;
}
/*滑块轨道*/
.custom-slider::-webkit-slider-runnable-track {/*设置颜色才能看到*/background: gray;/*主动设置高度, 不设置的话就要用拇指的高度撑起来, 否则看不见*/height: 10px;/*轨道会连带拇指一同缩放*//*scale: 0.8;*/
}
/*让滑块远离边缘*/
body {margin: 50px;
}

截图:chrome浏览器\Edge浏览器
在这里插入图片描述

三点五、css(火狐)

.custom-slider {/*无论把-moz-appearance和appearance写哪里, 火狐都是没反应的, 它就不用写*//*-moz-appearance: none;appearance: none;*/
}
/* 火狐的滑块拇指 */
.custom-slider::-moz-range-thumb {/*默认样式直接覆盖*/border: none;border-radius: 0;background: tan;height: 20px;width: 20px;cursor: pointer;/*在火狐中, 想要设置轨道的transform必须同时设置拇指的transform, *//*否则拇指会被轨道覆盖, 没什么写的就直接让拇指translateZ(0)即可*/transform: translateZ(0);
}
/* 火狐的滑块轨道 */
.custom-slider::-moz-range-track {background: gray;height: 10px;/*在火狐中, 想要设置轨道的transform必须同时设置拇指的transform, *//*否则拇指会被轨道覆盖, 没什么写的就直接让拇指translateZ(0)即可*/transform: scale(0.9);
}
/*让滑块远离边缘*/
body {margin: 50px;
}

截图:火狐
在这里插入图片描述


http://www.mrgr.cn/news/97379.html

相关文章:

  • c++项目 网络聊天服务器 实现;QPS测试
  • 【HFP】蓝牙HFP应用层核心技术研究
  • 算法基础—前缀和
  • 深入解析多功能模糊搜索:构建高效灵活的JavaScript搜索工具析
  • Java 集合框架与 Stream 流深入剖析(重点详细讲解)
  • ffmpeg视频转码相关
  • Python星球日记 - 第5天:循环结构
  • 个人博客系统——测试报告
  • Python----计算机视觉处理(Opencv:道路检测之提取车道线)
  • 4.nRF52xx蓝牙学习(GPIOTE与外部中断)
  • Docker基础2
  • 【前端】Node.js一本通
  • 红宝书第二十九讲:详解编辑器和IDE:VS Code与WebStorm
  • 21 天 Python 计划:MySQL 库相关操作
  • 类与对象(中)(详解)
  • k8s1.24升级1.28
  • [刷题总结] 双指针 滑动窗口
  • 【内网安全】DHCP 饿死攻击和防护
  • Gerapy二次开发:用户管理专栏主页面开发
  • 【ARTS】【LeetCode-2873】有序三元组中的最大值!