Bootstrap 5中input-group聚焦时box-shadow重叠问题求助

问题分析 #

你遇到的核心问题是：输入框聚焦时，.form-control和.input-group-text的默认阴影发生重叠，导致视觉上阴影过浓；调整后又出现阴影左右间距超出默认尺寸的问题。

解决方案 #

采用给整个input-group添加统一阴影的方式替代给单个元素加阴影，同时保持内部元素的边框变色效果，既解决重叠问题，又和Bootstrap默认视觉风格一致：

/* 输入组整体聚焦时的统一阴影，与Bootstrap默认输入框阴影尺寸一致 */
.input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
    transition: box-shadow 0.15s ease-in-out;
}

/* 聚焦时同步内部元素的边框颜色 */
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
    border-color: #80bdff;
    transition: border-color 0.15s ease-in-out;
}

/* 移除单个元素的默认聚焦阴影，避免重叠 */
.input-group:focus-within .form-control:focus {
    box-shadow: none;
}

.input-group:focus-within .input-group-text {
    box-shadow: none;
}

方案优势 #

1. 无阴影重叠：整个输入组作为一个整体显示聚焦阴影，彻底避免单个元素阴影交叉重叠的问题
2. 匹配默认尺寸：阴影参数与Bootstrap原生输入框完全一致，不会出现间距过大或过小的问题
3. 保留交互反馈：聚焦时输入框和右侧文本框的边框仍会同步变为主题蓝色，清晰传递交互状态
4. 符合组件逻辑：input-group作为复合输入组件，整体反馈更贴合Bootstrap的组件设计初衷

内容的提问来源于stack exchange，提问作者lauwis