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

如何让 -webkit-slider-thumb 生效

news 2025/4/30 21:01:26

一、重点：

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