关于修复边框高亮问题的问题答案

【问题标题】：question about fixing border highlight issue关于修复边框高亮问题的问题
【发布时间】：2022-09-25 06:13:42
【问题描述】：

我并排有 2 个输入，如下所示：

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

.browse-query {
  display: flex;
}

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

<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>

<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>

当我单击 LHS 输入时，边框会突出显示，但看起来不正确，如下所示：

RHS 输入隐藏突出显示的边框。无论如何我可以解决这个问题吗？

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

设置聚焦输入的相对位置，使其与未聚焦的字段重叠。

无论如何，出于可访问性的原因，输入等可操作元素的间距应足够远以使界面更清晰（例如，您可以为.browse-query 设置gap）。还应提供字段的label 元素（占位符不够有效）。

.centered-query-cn {
  height: calc(100vh - (334px + 6vh));
  min-height: 340px;
  margin: auto;
  display: flex;
}

.browse-query {
  display: flex;
}

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

input:focus {
  position: relative;
  z-index: 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>

<div class="centered-query-cn row">
  <div class="align-self-center w-100">
    <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>

【讨论】：

你可以省略 z-index， position:relative 可以单独完成这项工作。或者你只设置 z-index 因为 input 是一个弹性项目，所以它不需要 position:relative 来使 z-index 工作

【解决方案2】：

这是因为您的 RHS 覆盖了 LHS 输入。您应该将 RHS 向右移动一点。

如果你不想移动它，你必须使用 z-index 属性。

【讨论】：