直接改.input-group内.form-control边框颜色无效，因.input-group会重置子元素边框与圆角，且.prepend/.append组件边框色不一致；须同步覆盖.form-control、.input-group-text及.preprend/.append内.btn的border-color和border-radius，并统一:focus状态box-shadow。
直接改 .input-group 内部 .form-control 的边框颜色没用？
因为 Bootstrap 4 的 .input-group 默认会重置子元素的 border-radius 和部分边框样式，且 .form-control 的 border 被 .input-group 的伪元素或相邻兄弟选择器覆盖（比如 .input-group-prepend/.input-group-append 的边框干扰）。单纯给 .form-control 加 border-color: red 往往只生效在左右两侧，上下被截断或被覆盖。
必须同时覆盖 .input-group 和 .form-control 的边框与圆角
关键不是“改哪个元素”，而是让整个输入组视觉上呈现统一边框色。需要同步处理三处：
-
.input-group > .form-control：控制主体输入框边框 -
.input-group > .input-group-prepend > .btn或.input-group-text：防止左侧附加组件边框色不一致 -
.input-group > .input-group-append > .btn或.input-group-text：同理处理右侧
推荐写法（以红色为例）：
.my-input-group .form-control,
.my-input-group .input-group-text,
.my-input-group .input-group-prepend .btn,
.my-input-group .input-group-append .btn {
border-color: #dc3545;
border-radius: 0.25rem; /* 恢复 Bootstrap 默认圆角 */
}
<p>/<em> 修复 input-group 内部左右连接处的边框断裂 </em>/
.my-input-group .form-control:focus,
.my-input-group .input-group-text:focus,
.my-input-group .input-group-prepend .btn:focus,
.my-input-group .input-group-append .btn:focus {
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
</p>
为什么不能只用 !important 强制覆盖？
Bootstrap 4 的 CSS 优先级本身较高（大量类选择器组合），盲目加 !important 容易导致：
- 焦点状态（
:focus）下边框色被默认box-shadow盖住，实际看不出变化 - 响应式断点切换时，
border-radius在不同屏幕尺寸下表现不一致（如移动端自动变直角） - 和
.is-invalid/.is-valid等表单校验类冲突，覆盖后校验图标或提示色失效
正确做法是沿用 Bootstrap 的 class 结构逻辑，用更具体的选择器替代 !important。
如果用了自定义主题变量（Sass），该改哪？
如果你项目是基于 Bootstrap 4 Sass 源码构建的，最干净的方式是重定义变量而非写覆盖 CSS：
- 修改
$input-border-color（影响所有.form-control） - 但
.input-group还依赖$input-group-addon-bg和$input-group-addon-border-color—— 这两个变量控制.input-group-text的背景和边框 - 若只想改特定输入组，建议保留全局变量不变，在局部 class 中用 CSS 覆盖，避免污染其他表单
例如在 Sass 中局部作用：
.my-input-group {
.form-control,
.input-group-text,
.input-group-prepend .btn,
.input-group-append .btn {
border-color: $danger;
}
}
真正容易被忽略的是：输入组中按钮（.btn）默认有独立的 border 和 border-radius，如果不一并处理，左右拼接处会出现双色边框或圆角错位。动手前先 inspect 元素，看清实际生效的规则链再下手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
