Angular+Bootstrap5：输入框聚焦时修改InputGroup边框与图标颜色问题

问题原因分析 #

你的CSS选择器逻辑错误：

• .form-control:focus + .input-group-text 无效，因为input-group-text是form-control的前序兄弟元素，+选择器只能选中紧随其后的兄弟元素，无法逆向选择前面的元素。
• .form-control:focus + fa-icon 同样无效，图标嵌套在input-group-text内部，且不在form-control的兄弟层级。

解决方案一：使用CSS :has()选择器（推荐，简洁高效） #

利用CSS的:has()选择器，让父元素input-group根据子元素form-control的焦点状态触发样式修改，现代浏览器（Chrome 105+/Firefox 121+/Edge 105+）均支持，Angular项目环境完全适配。

修改后的CSS代码：

.input-group-text{
  background-color: white;
  color: var(--gray-200);
}

.form-control{
  height: 50px;
  border-left: 0;
}

.form-control:focus{
  box-shadow: none;
  border-color: transparent;
  border: 1px solid var(--primary-color);
  border-left: 0;
}

/* 新增核心样式 */
.input-group:has(.form-control:focus) {
  border: 1px solid var(--primary-color); /* 修改整个input-group的边框 */
}

.input-group:has(.form-control:focus) .input-group-text {
  border-color: var(--primary-color); /* 同步图标容器的边框颜色，避免拼接断层 */
  color: var(--primary-color); /* 修改图标颜色，fa-icon会继承该颜色 */
}

解决方案二：Angular模板变量+动态类绑定（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，可以通过Angular的模板变量监听输入框焦点状态，动态给input-group添加样式类。

修改后的HTML代码：

<div class="input-group" [class.input-group-focused]="searchInput.focused">
  <span class="input-group-text" id="basic-addon1">
    <fa-icon [icon]="['fas', 'search']" size="1x"></fa-icon>
  </span>
  <input #searchInput type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

新增CSS样式：

.input-group-focused {
  border: 1px solid var(--primary-color);
}

.input-group-focused .input-group-text {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

补充说明 #

• Bootstrap的input-group默认边框由内部input-group-text和form-control的边框拼接而成，需确保两者边框颜色一致，避免视觉断层。
• 若使用:has()方案，无需单独选择fa-icon，它会继承input-group-text的color属性。

内容的提问来源于stack exchange，提问作者Lubomír Rýgl