html - 输入焦点上的样式图标

Question

我想让我的输入表单旁边的搜索图标在我聚焦时改变颜色，但我似乎无法找到正确的选择器。如果我在表单本身上手动添加焦点事件，这将起作用，但不适用于输入。这是怎么回事？

HTML

<form action="/search" class="form-inline" method="get">
  <div class="glyphicon glyphicon-search"></div>
  <input autocomplete="off" class="form-control" data-turboform="" name="search" placeholder="Search for your products!" value="" type="text">
  <div class="checkbox">
    <label>
      <input type="checkbox">
      Translate my search
      <span class="bold">?</span>
    </label>
  </div>
</form>

CSS

input[type="text"]:focus .glyphicon-search{
  color: $bp-orange
}

Answer 1

您可以使用 + 选择器，它将 css 应用于下一个兄弟，但为此您需要先放置 input，然后在 html 中放置 glyphicon。

input[type="text"]:focus + .glyphicon-search{
  color: $bp-orange
}

<form action="/search" class="form-inline" method="get">
  <input autocomplete="off" class="form-control" data-turboform="" name="search" placeholder="Search for your products!" value="" type="text">
  <div class="glyphicon glyphicon-search"></div>
  <div class="checkbox">
    <label>
      <input type="checkbox">
      Translate my search
      <span class="bold">?</span>
    </label>
  </div>
</form>