如何修改Bootstrap中DOM元素默认聚焦外发光的蓝色高亮颜色？

嘿，我之前刚好搞定过一模一样的需求，给你两个简单高效的方案，不用一个个类去改：

Bootstrap里大部分组件的键盘焦点高亮（比如TAB切换时的蓝色效果），要么用box-shadow实现，要么是原生元素的outline样式。你可以写一段全局样式直接覆盖所有元素的焦点状态：

/* 覆盖所有键盘触发的焦点样式 */
*:focus-visible {
  /* 替换成你想要的轮廓样式 */
  outline: 2px solid #ff6b6b !important;
  /* 替换成你想要的阴影效果，颜色和透明度可以自己调 */
  box-shadow: 0 0 0 0.25rem rgba(255, 107, 107, 0.25) !important;
}

这里用:focus-visible而不是:focus，是因为它只会匹配键盘导航触发的焦点（比如TAB键），不会影响鼠标点击的焦点状态，更符合无障碍访问的最佳实践。!important是为了确保你的样式优先级超过Bootstrap的默认设置，如果你不想用!important，也可以把这段代码放在Bootstrap CSS之后引入，利用CSS的加载顺序优先级生效。

如果你是通过Sass引入Bootstrap的（这是官方推荐的自定义方式），直接修改对应的变量再重新编译就可以了，完全不用写覆盖样式，也没有!important的副作用：

// 先定义你的自定义变量，要在导入Bootstrap之前
$focus-ring-color: #ff6b6b; // 替换成你想要的焦点颜色
$focus-ring-opacity: 0.25; // 调整阴影的透明度

// 然后导入Bootstrap的核心Sass文件
@import "bootstrap/scss/bootstrap";

Bootstrap内部所有用到焦点样式的组件（包括菜单、按钮、输入框、下拉框等），都会自动使用你设置的颜色，这是最优雅的自定义方式，而且后续更新Bootstrap版本也不会丢失你的修改。

注意事项 #

• 千万别直接修改Bootstrap的原始CSS文件，下次更新Bootstrap时你的修改会被完全覆盖，一定要用自定义CSS或者Sass变量的方式。
• 如果用方案一，记得测试不同组件的焦点状态，确保样式符合你的预期，比如模态框、下拉菜单这些组件的焦点样式也会被覆盖。

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