如何移除<audio>标签的默认橙色边框？

问题原因 #

你之前的CSS不生效有两个核心问题：

1. 你看到的橙色边框是浏览器默认的焦点outline属性，不是border，二者是完全独立的样式
2. 你把:focus伪类绑定到了::-webkit-media-controls-panel子元素上，实际上绝大多数浏览器的默认焦点样式是直接加在audio根标签上的

修复代码 #

你可以使用下面的CSS实现需求：

audio {
  /* 先清除audio元素本身的焦点高亮 */
  outline: none;
  &::-webkit-media-controls-panel {
    background: #F4F8FE;
  }
  /* 清除控件内部按钮的焦点高亮 */
  &::-webkit-media-controls-panel *:focus {
    outline: none;
    border: none;
  }
}

/* 兼容Firefox浏览器 */
audio::-moz-focus-inner {
  border: 0;
  outline: 0;
}

如果依然有橙色边框出现，可以额外添加下面的规则覆盖浏览器的强制焦点样式：

audio:focus, audio:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

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