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

如何让 -webkit-slider-thumb 生效

news 2025/10/30 9:12:24

一、重点：

必须将-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;
}