Bootstrap input 的蓝色/绿色边框源于:focus时的box-shadow和border-color联合效果，需同时设置border-color:#ced4da、box-shadow:none、outline:0，并确保选择器包含.form-control等实际类名且CSS加载顺序在Bootstrap之后。
为什么 Bootstrap 的 input 总是有蓝色/绿色边框？
因为 Bootstrap 5+ 默认给 :focus 状态的 input 加了 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25)（也就是那个蓝色光晕），同时保留了 border-color 变化。它不是单纯靠 border 实现的，所以只改 border 没用。
彻底移除 focus 边框和阴影的写法
必须同时覆盖 border 和 box-shadow，且优先级要高于 Bootstrap 的默认规则。推荐直接在自定义 CSS 中写：
input.form-control:focus {
border-color: #ced4da;
box-shadow: none;
outline: 0;
}
-
border-color设为默认浅灰（#ced4da），避免 focus 时突变 -
box-shadow: none是关键，否则光晕还在 -
outline: 0防止部分浏览器 fallback 出虚线框 - 选择器必须包含
.form-control（或你实际用的 class），否则可能被 Bootstrap 覆盖
如果用了 input[type="file"] 或 textarea 怎么办？
Bootstrap 对不同表单控件的 focus 样式是分开定义的，不能只写 input。需要分别处理：
-
input.form-control:focus—— 普通文本、邮箱等 -
textarea.form-control:focus—— 多行文本框 -
input[type="file"]:focus—— 文件上传控件（它没加.form-control，需单独写） - 若用了
.form-select，也要加.form-select:focus
漏掉任意一种，对应控件 focus 时仍会闪出原生样式。
立即学习“前端免费学习笔记（深入）”；
为什么加了 CSS 还没生效？
常见原因有三个：
- CSS 文件加载顺序不对：你的样式必须在 Bootstrap CSS 之后引入
- 用了
!important但写错了位置（比如只加在border上，没加在box-shadow上） - 项目用了 Bootstrap 的 Sass 源码并自定义了
$form-focus-box-shadow变量——这时直接改 CSS 无效，得改变量再编译
最稳的方式是检查 DevTools 中 computed styles，看 box-shadow 是否真被覆盖成 none，而不是只盯着声明是否出现。
