如何禁用Video.js播放器按钮的蓝色边框与框阴影

我完全懂你遇到的困扰——Video.js播放器的播放、字幕、全屏这些按钮，点击或者聚焦时弹出的蓝色边框/阴影确实很影响视觉体验。你之前尝试的CSS没生效，主要是因为选择器没有精准覆盖到所有触发这些样式的元素状态。

试试下面这段CSS代码，它能彻底禁用所有Video.js交互元素的蓝色焦点边框和阴影：

/* 覆盖所有Video.js控制按钮的焦点/激活状态样式 */
.video-js .vjs-control:focus,
.video-js .vjs-control:active,
.video-js .vjs-big-play-button:focus,
.video-js .vjs-big-play-button:active,
.video-js .vjs-subtitles-button:focus,
.video-js .vjs-subtitles-button:active,
.video-js .vjs-fullscreen-control:focus,
.video-js .vjs-fullscreen-control:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 额外覆盖滑块类元素的焦点样式（比如音量条） */
.video-js .vjs-slider:focus,
.video-js .vjs-slider:active {
  outline: none !important;
  box-shadow: none !important;
}

代码说明： #

• 核心是针对元素的:focus和:active状态——这两个状态就是按钮被点击或键盘聚焦时触发蓝色样式的关键。
• 单独列出了你提到的几个关键按钮（大播放按钮、字幕按钮、全屏按钮），确保不会遗漏。
• 额外添加了滑块元素的样式，防止音量条这类交互控件也出现同样的问题。
• 使用!important是为了强制覆盖Video.js的默认样式和浏览器自带的焦点轮廓样式，保证代码生效。

如果之后还有某个元素没被覆盖，你可以打开浏览器开发者工具（按F12），选中那个出现蓝色边框的元素，查看它的类名和对应的CSS规则，把对应的选择器补充到上面的代码里就好。

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