直接覆盖 .input-group 类易失效，因其样式优先级高、大量使用 !important 和嵌套选择器（如 .input-group > .form-control），且部分逻辑依赖 :has() 伪类或伪元素；应精准覆盖子元素（.form-control、.input-group-text、.btn）并适配 v5.3+ 的 :has(.form-control:focus) 动态逻辑。
为什么直接覆盖 .input-group 类容易失效
Bootstrap 的 .input-group 样式优先级高，尤其 v5+ 大量使用 !important 和嵌套选择器（比如 .input-group > .form-control），单纯写 .input-group { border: 1px solid red; } 基本不起作用。更麻烦的是，部分样式来自 :has() 逻辑或伪元素（如 .input-group-text::before），不看清源码结构就硬改，常导致右侧按钮错位、圆角丢失或 focus 状态异常。
推荐用 CSS 层叠顺序 + 关键选择器精准覆盖
不要试图重写整个 .input-group，而是按需替换具体子元素的渲染行为。重点盯住这三类节点：
-
.input-group > .form-control：控制输入框本身宽高、边框、圆角 -
.input-group > .input-group-text：处理前后缀文字/图标的背景、padding、border -
.input-group > .btn或.input-group > .btn-group：影响按钮尺寸对齐和 hover/focus 状态
示例：统一圆角与边框颜色
.input-group > .form-control {
border-radius: 6px 0 0 6px;
border-color: #4a5568;
}
.input-group > .input-group-text {
border-radius: 0 6px 6px 0;
background-color: #edf2f7;
border-color: #4a5568;
}
.input-group > .btn {
border-radius: 0 6px 6px 0;
}
处理 Bootstrap v5.3+ 的 :has() 布局干扰
v5.3 引入了 .input-group:has(.form-control:focus) 这类选择器来动态调整外层边框颜色。如果你禁用了 focus 样式或替换了 .form-control 的 class，这个逻辑会失效，导致聚焦时边框不变色。解决方法只有两个：
- 保留原
.form-controlclass，仅通过属性选择器覆盖（如.input-group > .form-control[aria-invalid="true"]） - 手动补全 focus 状态样式：
.input-group > .form-control:focus { box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.25); }
注意：Bootstrap 默认的 box-shadow 是通过 --bs-form-control-focus-box-shadow CSS 变量控制的，直接覆盖变量比硬写 box-shadow 更稳妥。
避免 Flex 布局被 .input-group 的 display: flex 搞乱
Bootstrap 给 .input-group 设了 display: flex 和 flex-wrap: wrap，但如果你在里面塞了 width: 100% 的组件（比如自定义下拉 Select），它可能被强行压缩或换行。这时候不能删 display: flex —— 否则按钮对齐全崩，而应：
- 给内部组件加
flex: 1 1 auto让它占满剩余空间 - 用
min-width: 0防止文本溢出破坏布局（常见于长 label 或 placeholder） - 若需垂直居中，别碰
align-items，改用.input-group > * { align-self: center; }单独控制
一个典型坑：在 .input-group 里放 <select></select>，没加 flex: 1 就会缩成窄条。
真正难的不是写新样式，而是判断哪一层的样式正在生效 —— 打开 DevTools，逐层关掉 Bootstrap 的 CSS 规则，比盲目堆 !important 有效得多。很多“覆盖失败”，其实是选错了目标元素或漏掉了伪类状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
