Bootstrap输入框:focus样式被覆盖时，应检查开发者工具确认是否被删除线标记，优先使用.shadow-focus类或在Bootstrap CSS后用更高特异性选择器重置box-shadow并配transition。
Bootstrap输入框默认:focus样式被覆盖了怎么办
Bootstrap 5+ 的 .form-control 默认有 box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25)，但如果你用自定义 CSS 覆盖了它（比如重置了 outline 或写了 box-shadow: none），焦点效果就消失了——不是没触发 :focus，是样式被干掉了。
实操建议：
- 先检查浏览器开发者工具里
.form-control:focus是否被标记为 strikethrough（删除线），确认是不是 CSS 层叠问题 - 不要直接在
:focus上写box-shadow: none；如果必须清空，改用outline: 0配合显式重置box-shadow - 优先用 Bootstrap 自带的
.shadow-focus工具类（v5.3+）：，它内部就是可靠的box-shadow声明
怎么用CSS给.form-control加自定义:focus box-shadow
想换颜色、调大小、加过渡？别碰 !important，靠 specificity 和顺序就行。Bootstrap 的默认焦点样式权重不低（.form-control:focus），你得至少同级或更高。
实操建议：
- 把自定义样式放在 Bootstrap CSS 之后引入，或用更具体的 selector：
.my-form .form-control:focus - 显式声明所有
box-shadow参数，避免被部分覆盖：例如box-shadow: 0 0 0 0.2rem #0d6efd;（注意不是0.25rem，这是为了和原版错开，方便调试） - 加
transition让效果柔和：transition: box-shadow 0.15s ease-in-out;，否则会突兀闪现 - 移动端 Safari 对
:focus支持不稳定，可补一句.form-control:focus-visible作降级
为什么加了box-shadow还是看不到焦点高亮
常见错误不是代码写错，而是视觉干扰太多：比如父容器有 overflow: hidden、输入框外层套了 .input-group 但没给足够 padding、或者用了 border-radius 但 box-shadow 溢出被裁剪。
实操建议：
- 临时加
outline: 2px solid red测试是否真触发了:focus—— 如果 outline 出现而 shadow 不见，基本是溢出或层级问题 - 检查
.form-control的border-radius值，如果大于0.375rem（Bootstrap 默认），要同步加大box-shadow的 spread radius，否则阴影被圆角“吃掉” - 如果用了
.input-group，确保.input-group-text没设置z-index盖住了 shadow；必要时给.form-control:focus加z-index: 2
兼容旧版Bootstrap（v4）和自定义主题时的坑
Bootstrap 4 的 :focus 样式依赖 $input-btn-focus-box-shadow 变量，且默认用 rgba(0,123,255,.25)；v5 改成 rgba(13,110,253,.25)。如果你混用主题或升级中途，颜色可能不一致，甚至 shadow 完全失效。
实操建议：
- 查变量名：v4 是
$input-focus-box-shadow，v5 是$form-control-focus-box-shadow，编译时别引错 - 如果用 Sass，直接覆盖变量比写 CSS 更稳：
$form-control-focus-box-shadow: 0 0 0 0.2rem rgba(102, 17, 255, 0.3); - 非 Sass 环境下，用属性选择器锚定版本：
input.form-control[data-bs-theme="light"]:focus（v5.3+ 新增）做条件覆盖
最常被忽略的是 box-shadow 的 spread radius 和 border-radius 的匹配关系——差 0.05rem 就可能让阴影半边消失，调试时放大到 200% 看边缘最准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
