输入焦点上的样式图标

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>