如何使用CSS修改range滑块的thumb颜色？设置后不生效怎么办？

• 核心原因是Chromium内核（Brave基于Chromium开发，样式规则和Chrome完全一致）的range组件默认存在原生样式锁，缺少前置重置的话，所有自定义伪元素样式都会被浏览器内置的UA样式覆盖。
• 你现有代码存在的具体问题：
  • 未给滑块本体、thumb伪元素分别添加-webkit-appearance: none重置声明，原生控件样式优先级最高，自定义的背景色完全不生效
  • 代码中background-image: white;属于无效语法：background-image仅支持图片、渐变类值，传入颜色值会被浏览器直接判定为无效声明
  • 未覆盖thumb的原生默认边框、内阴影，哪怕背景色设置成功，默认的灰色阴影/边框也会遮挡白色的视觉效果
  • 之前写的margin-top: -2.5px没有匹配实际的轨道高度计算垂直偏移，滑块位置错位后，很容易误判样式修改没生效
• 可直接复用的生效代码：

/* 1. 先给滑块本体解锁原生控件限制 */
#red {
  -webkit-appearance: none;
  appearance: none;
  width: 200px;
  height: 4px;
  background: #999;
  border-radius: 2px;
  outline: none;
}

/* 2. 自定义thumb样式 */
#red::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  /* 垂直居中计算：(轨道高度4px - 滑块高度16px)/2 = -6px */
  margin-top: -6px;
  cursor: pointer;
  background: #fff;
  border: none;
  border-radius: 50%;
  /* 可自定义阴影避免纯白滑块和背景融合 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

补充：如果需要兼容火狐浏览器，只需要额外添加#red::-moz-range-thumb的同结构样式即可，Brave下上述代码可以直接生效。

内容的提问来源于stack exchange，提问作者user15259537