如何在input控件获焦时设置input-group-text元素的边框宽度

问题场景 #

我有一个包含input-group的表单结构：

<div class="form-group mb-3">
    <div class="input-group">
        <input asp-for="Email" class="form-control" />
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-envelope"></span>
            </div>
        </div>
    </div>
    <small>
        <span asp-validation-for="Email" class="text-danger"></span>
    </small>
</div>

目前用这段SCSS修改input获焦时的边框宽度：

.form-control:focus,
.form-control:focus:active  {
    border-width: $input-focus-width !important;
}

但只有input控件的边框宽度会变化，想实现input获焦时，旁边的input-group-text元素也同步设置相同的边框宽度。

解决方案 #

利用CSS的相邻兄弟选择器和后代选择器，选中获焦input对应的input-group-text并同步样式，修改后的SCSS代码如下：

// 保留原input获焦样式
.form-control:focus,
.form-control:focus:active {
    border-width: $input-focus-width !important;
}

// 新增：同步修改input-group-text的边框宽度
.form-control:focus ~ .input-group-append .input-group-text,
.form-control:focus:active ~ .input-group-append .input-group-text {
    border-width: $input-focus-width !important;
    // 可选：调整圆角和左侧边框，让input与图标框衔接更自然
    border-left-width: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

说明 #

• ~ 是相邻兄弟选择器，用于选中当前元素（获焦的input）后方同层级的.input-group-append容器
• 通过后代选择器定位到容器内的.input-group-text元素，同步设置边框宽度
• 加上!important是为了覆盖框架（比如Bootstrap）的默认样式优先级
• 可选的圆角调整是为了避免input和图标框之间出现双边框或圆角冲突，让视觉效果更统一

如果你的图标是在input左侧（用.input-group-prepend），只需把选择器中的.input-group-append换成.input-group-prepend，并调整圆角为右侧即可：

.form-control:focus ~ .input-group-prepend .input-group-text,
.form-control:focus:active ~ .input-group-prepend .input-group-text {
    border-width: $input-focus-width !important;
    border-right-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

内容的提问来源于stack exchange，提问作者Ivan-Mark Debono