Bootstrap Input group：输入框聚焦时为前置按钮添加CSS属性

你之前使用通用兄弟选择器.form-control:focus ~ .btn不生效的核心原因是：CSS的通用兄弟选择器~只能匹配位于目标元素后方的同级节点，你的DOM结构中按钮在输入框之前，天然无法被该选择器命中。
除了你提到的flex-flow: row-reverse、order属性调整、元素浮动这几种改变视觉顺序的方案外，还有以下3种更易维护、不破坏原有交互逻辑的实现方案：

• 方案1：使用:has()伪类（现代浏览器最优纯CSS方案）
  :has()是CSS选择器Level 4标准中的父选择器，目前主流现代浏览器已全量支持，不需要改动任何DOM结构、不需要调整排版顺序、不会破坏Tab键聚焦逻辑，直接给父容器加状态判断即可：

  /* 匹配内部输入框处于聚焦状态的输入组，选中组内按钮设置样式 */
  .input-group:has(.form-control:focus) .btn {
    background: red;
  }
  

  该方案可以精确匹配「输入框聚焦」的触发条件，不会因为组内其他元素（比如按钮本身）聚焦误触发样式，Chrome 105+、Firefox 121+、Safari 15.4+均已支持。
• 方案2：使用:focus-within伪类（高兼容性纯CSS方案）
  如果你的项目需要兼容更早版本的浏览器，且输入组内除了输入框外没有其他会触发聚焦的元素（或不介意按钮聚焦时同步显示样式），可以使用父元素的:focus-within伪类实现，兼容性覆盖Chrome 60+、Firefox 52+、Safari 10.1+：

  /* 输入组内任意子元素聚焦时，触发按钮样式 */
  .input-group:focus-within .btn {
    background: red;
  }
  

  注意如果输入组内存在多个可聚焦元素，该写法会在任意子元素聚焦时触发样式，需要根据业务场景判断是否适用。
• 方案3：极简JS事件绑定（全浏览器兼容方案）
  如果需要兼容不支持:has()的老旧浏览器，可以用极少量JS做状态切换，不需要改动DOM结构和原有布局：

  // 为所有绑定了同组按钮的输入框添加聚焦/失焦状态监听
  document.querySelectorAll('.input-group .form-control').forEach(inputEl => {
    const groupEl = inputEl.closest('.input-group')
    inputEl.addEventListener('focus', () => groupEl.classList.add('is-input-focus'))
    inputEl.addEventListener('blur', () => groupEl.classList.remove('is-input-focus'))
  })
  

  配套样式代码：

  .input-group.is-input-focus .btn {
    background: red;
  }
  

  该方案无兼容性问题，逻辑可控，适合需要覆盖老旧浏览器的场景。

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