为Bootstrap的input-group添加:focus样式的问题求助

我来帮你搞定这两个头疼的问题，咱们从根源上调整代码，让聚焦样式完全符合你的预期：

问题1：输入框右边框无法去除 #

你说得没错，Bootstrap的.form-control:focus默认自带box-shadow，而且默认边框样式的优先级可能比你单独写的CSS更高。咱们可以通过更精确的CSS选择器来覆盖默认样式，同时调整阴影范围，让输入框和右侧的%容器看起来是一个整体。

问题2：样式影响所有Input Group #

你的JS逻辑是全局判断有没有输入框获焦，自然会把类加到所有.input-group-append上。咱们需要给每个输入框绑定聚焦/失焦事件，只操作当前输入框所在的Input Group元素。

修改后的完整代码 #

HTML（保持你的结构不变）

<div class="form-group row">
  <label for="creditLimitField" class="col-2 col-form-label">Percentage markup</label>
  <div class="col-2" style="padding: 0">
    <div class="input-group">
      <input id="markupPercentField" class="form-control" type="number" placeholder="Enter a markup percentage" value="20">
      <div class="input-group-append">
        <span class="input-group-text font-weight-bold">%</span>
      </div>
      <div id="markupPercentFieldError" class="invalid-feedback">
        Percentage cannot be <span id="percentError"></span>.
      </div>
    </div>
  </div>
</div>

CSS（优化选择器和样式）

/* 针对input-group内的获焦输入框，去除右边框并调整阴影范围 */
.input-group .form-control:focus {
  border-right: 0 !important;
  box-shadow: -0.2rem 0 0 0.2rem rgba(0, 123, 255, .25) !important;
}

/* 获焦状态下的右侧%容器样式 */
.input-group-append.inputGroupEndFocus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
  border-radius: 0 4px 4px 0; /* 只保留右上角和右下角圆角，贴合Bootstrap风格 */
  border-left: 0;
  border-top: 1px solid #80bdff;
  border-bottom: 1px solid #80bdff;
  border-right: 1px solid #80bdff;
}

JS（绑定局部事件，精准操作）

// 给所有输入框绑定聚焦事件，仅操作当前所在的input-group
$('input').on('focus', function() {
  $(this).closest('.input-group').find('.input-group-append').addClass('inputGroupEndFocus');
});

// 绑定失焦事件，移除当前input-group的聚焦样式
$('input').on('blur', function() {
  $(this).closest('.input-group').find('.input-group-append').removeClass('inputGroupEndFocus');
});

关键调整说明 #

1. CSS优先级优化：用.input-group .form-control:focus确保样式优先级高于Bootstrap默认样式，同时把输入框的阴影调整为只覆盖左、上、下三个方向，和右侧容器的阴影完美衔接。
2. 事件范围控制：使用closest('.input-group')定位当前输入框的父级容器，只对这个容器内的.input-group-append添加/移除类，彻底避免影响其他Input Group。
3. 细节样式调整：给右侧容器设置针对性的圆角和边框，让整体视觉效果和Bootstrap默认风格统一。

这样调整后，就能实现你想要的效果：获焦时输入框无右边框，%容器拥有上、下、右边框，且样式仅作用于当前获焦的Input Group啦~

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