修复Bootstrap并排输入框边框高亮被遮挡问题

问题原因 #

你用Flex布局实现的两个Bootstrap输入框紧密排列时，左侧输入框获得焦点后的高亮边框（由Bootstrap的form-control:focus样式生成）会被右侧输入框遮挡，这是因为右侧输入框在DOM顺序上靠后，默认堆叠层级（z-index）与左侧一致，导致它覆盖了左侧的高亮效果。

解决方案 #

方案1：提升焦点输入框的堆叠层级

为获得焦点的输入框设置更高的z-index，让它的高亮效果显示在最上层：

.centered-query-cn {
  height: 150px;
  display: flex;
}

.browse-query {
  display: flex;
}

.browse-query input {
  flex-grow: 1 !important;
}

/* 添加这行代码 */
.browse-query input:focus {
  z-index: 1;
}

方案2：给输入框添加间距

在两个输入框之间留出空隙，避免高亮被遮挡。可以用自定义CSS或Bootstrap内置类：
方式A：自定义CSS

.browse-query input:first-child {
  margin-right: 0.5rem; /* 可根据需求调整间距大小 */
}

方式B：使用Bootstrap内置类
直接在第一个输入框上添加mr-2（margin-right）类：

<input class="form-control form-control-lg mr-2" placeholder="term" type="text">
<input class="form-control form-control-lg" placeholder="location" type="text">

方案3：调整焦点高亮样式（可选）

如果不想改变布局或层级，可以修改Bootstrap的焦点高亮样式，比如缩小阴影扩散范围或改为内部高亮：

.browse-query input:focus {
  /* 改为内部阴影 */
  box-shadow: inset 0 0 0 0.2rem rgba(0,123,255,.25);
  /* 或者缩小外部阴影的扩散范围 */
  /* box-shadow: 0 0 0 0.1rem rgba(0,123,255,.25); */
}

完整代码示例（以方案1为例） #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<style>
.centered-query-cn {
  height: 150px;
  display: flex;
}

.browse-query {
  display: flex;
}

.browse-query input {
  flex-grow: 1 !important;
}

.browse-query input:focus {
  z-index: 1;
}
</style>

<div class="centered-query-cn row">
  <div class="align-self-center">
    <div class="d-flex justify-content-center">
      <div class="col-10">
        <div class="browse-query">
          <input class="form-control form-control-lg" placeholder="term" type="text">
          <input class="form-control form-control-lg" placeholder="location" type="text">
        </div>
      </div>
    </div>
  </div>
</div>

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