无法自定义原生audio标签样式，求助移除音量控件等默认样式

原生audio的内置控件由浏览器原生渲染，不同浏览器的样式伪元素规则不一样，这是你之前尝试修改失败的核心原因。以下是两种适合新手的解决方案：

方案一：用CSS伪元素保留音量控件、隐藏其他控件 #

直接复制下面的CSS代码到你的样式文件中，针对Chrome、Firefox、Edge等主流浏览器生效：

/* 隐藏播放/暂停按钮（不需要则删除） */
audio::-webkit-media-controls-play-button {
    display: none !important;
}
audio::-moz-media-controls-play-button {
    display: none !important;
}

/* 隐藏进度条 */
audio::-webkit-media-controls-timeline {
    display: none !important;
}
audio::-moz-media-controls-timeline {
    display: none !important;
}

/* 隐藏时间显示 */
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
    display: none !important;
}
audio::-moz-media-controls-current-time-display,
audio::-moz-media-controls-time-remaining-display {
    display: none !important;
}

/* 可选：调整音量控件样式 */
audio::-webkit-media-controls-volume-slider {
    width: 80px;
}
audio::-moz-media-controls-volume-slider {
    width: 80px;
}

你的HTML保持不变，必须保留controls属性：

<audio controls>
  <source src="your-audio-file.mp3" type="audio/mpeg">
  你的浏览器不支持audio标签
</audio>

方案二：自定义简易控件（兼容性更好，新手友好） #

如果CSS伪元素方案在某些浏览器不生效，直接自己实现音量控制，完全脱离原生控件的限制：

HTML #

<!-- 隐藏原生audio的控件 -->
<audio id="customAudio" src="your-audio-file.mp3"></audio>

<!-- 自定义控件区域 -->
<div class="audio-controls">
  <input type="range" id="volumeRange" min="0" max="1" step="0.1" value="1">
  <button id="togglePlay">播放</button> <!-- 可选：保留播放按钮 -->
</div>

CSS #

.audio-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

#volumeRange {
  width: 120px;
}

JS #

const audio = document.getElementById('customAudio');
const volumeRange = document.getElementById('volumeRange');
const togglePlay = document.getElementById('togglePlay');

// 绑定音量控制事件
volumeRange.addEventListener('input', () => {
  audio.volume = volumeRange.value;
});

// 绑定播放/暂停事件（可选）
togglePlay.addEventListener('click', () => {
  if (audio.paused) {
    audio.play();
    togglePlay.textContent = '暂停';
  } else {
    audio.pause();
    togglePlay.textContent = '播放';
  }
});

这个方案不需要依赖浏览器的原生样式规则，所有元素都由你自己控制，样式调整更灵活，也不会出现兼容性问题。

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