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>

输入焦点上的样式图标

1 个答案: