如何移除input[type=range]进度条的滑块（thumb）？

你当前仅针对WebKit内核浏览器设置了滑块隐藏，但不同浏览器的滑块伪类前缀不同，且部分浏览器对display: none的支持不一致，导致滑块无法完全隐藏。以下是兼容所有主流浏览器的修复方案：

修改后的CSS代码 #

.bar-progress {
  appearance: none;
  border-radius: 7px;
  width: 560px;
  margin-left: 20px;
  margin-right: 20px;
  height: 6px;
  border: none;
  outline: none;
  background: transparent; /* 避免与内联渐变冲突 */
}

/* WebKit内核（Chrome、Safari等） */
.bar-progress::-webkit-slider-thumb {
  appearance: none;
  width: 0;
  height: 0;
  opacity: 0;
}

/* Firefox */
.bar-progress::-moz-range-thumb {
  width: 0;
  height: 0;
  opacity: 0;
  border: none;
}

/* IE/Edge */
.bar-progress::-ms-thumb {
  width: 0;
  height: 0;
  opacity: 0;
  border: none;
}

/* 修复Firefox轨道默认样式 */
.bar-progress::-moz-range-track {
  border-radius: 7px;
  background: #0000000D;
}

关键说明 #

1. 放弃单一的display: none，改用移除外观+尺寸归零+完全透明的组合方案，适配更多浏览器的渲染逻辑
2. 必须添加不同内核的滑块伪类，覆盖Chrome、Firefox、IE/Edge等所有主流浏览器
3. 将进度条本身的背景设为transparent，确保内联的渐变样式正常显示，不会被浏览器默认轨道样式覆盖

如果仍有样式冲突，可通过浏览器开发者工具检查是否有其他CSS规则优先级更高，必要时可在滑块样式中添加!important（非必要不推荐）。

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