iOS Safari下input type range的-webkit-slider-thumb背景色无法修改求助

iOS Safari里<input type="range">的::-webkit-slider-thumb默认样式优先级极高，仅设置background-color: transparent无法覆盖默认样式，需先重置其外观属性：

修复后的CSS代码 #

input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-webkit-slider-thumb:active {
  -webkit-appearance: none; /* 禁用Safari默认UI样式 */
  appearance: none;
  background-color: transparent;
  border: none; /* 移除默认边框，避免残留视觉元素 */
  /* 若需完全隐藏滑块，可添加以下两行 */
  /* width: 0; */
  /* height: 0; */
}

关键原因 #

Safari为range控件的thumb提供了内置的原生UI，默认的-webkit-appearance值不是none，导致自定义背景色被浏览器默认样式覆盖。必须显式设置-webkit-appearance: none来关闭原生UI，才能让自定义样式生效。

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