如何将Bootstrap 5.3的focus ring改为inset box shadow？

嘿，我刚好折腾过这个需求，其实没那么复杂，核心就是覆盖Bootstrap默认的focus ring样式就行。默认的focus ring是通过外阴影实现的，我们只要把它改成内阴影（inset）就好，下面给你几种实用的实现方式：

方法一：全局覆盖所有focus ring样式 #

如果你想让整个项目里所有带focus-ring类的元素都用内阴影焦点框，直接写一段自定义CSS覆盖默认规则就行：

/* 覆盖全局focus-ring的焦点阴影为内阴影 */
.focus-ring:focus {
  /* 用Bootstrap内置的主题颜色变量保持风格统一，也可以替换成自定义色值 */
  box-shadow: inset 0 0 0 .25rem var(--bs-focus-ring-color) !important;
  /* 若不需要默认的outline，可添加这行，但注意要保证焦点可见性 */
  /* outline: none; */
}

这里用var(--bs-focus-ring-color)是为了和你项目里的Bootstrap主题颜色保持一致，要是想换个自定义颜色，直接把这个变量换成rgba(13, 110, 253, 0.25)这类具体色值就行。

方法二：创建自定义类，按需使用 #

如果不想全局修改，只想给特定元素加内阴影焦点框，可以自己写个专属类，需要的时候加上就行：

/* 自定义内阴影焦点框类 */
.focus-ring-inset:focus {
  box-shadow: inset 0 0 0 .25rem var(--bs-focus-ring-color) !important;
}

使用的时候，给目标元素同时加上focus-ring和自定义的focus-ring-inset类：

<input type="text" class="form-control focus-ring focus-ring-inset" placeholder="点击我看内阴影焦点效果">

方法三：用Sass变量预编译修改（适合用Bootstrap源码的项目） #

要是你项目是基于Bootstrap的Sass源码构建的，还可以直接修改内置变量，重新编译后全局生效：

// 重新定义focus ring的阴影样式为内阴影
$focus-ring-box-shadow: inset 0 0 0 .25rem var(--#{$prefix}focus-ring-color);

这种方式适合项目初期就需要统一自定义主题的场景，不用额外写覆盖CSS。

小提醒 #

• 焦点可见性对键盘导航用户很重要，别把内阴影颜色设得太淡或者和背景色太相近，确保能清晰识别
• 加!important是为了确保自定义样式能覆盖Bootstrap的默认规则，要是你的自定义CSS是在Bootstrap CSS之后加载的，有时候也可以不用，但保险起见加上更稳妥

内容来源于stack exchange