Question

您好有人可以帮助我如何将焦点从搜索图标更改为x图标这是我的代码：

<form class="navbar-form navbar-left" role="search" style="padding-top: 42px;padding-left: 75px;">
    <div class="input-group">
        <div class="form-group">
            <input style="  background: #f2f2f2;" type="text" class="form-control search" placeholder="search" name="search" id="navbar-search-input">
        </div>
        <div class="input-group-btn">
            <button type="button" id="btnSearch" style=" " class="btn btn-success btnSearch"><i class="fa fa-search"></i></button>
        </div>
    </div>
</form>

Answer 1

诀窍是使用 + 来选择下一个兄弟，请查看示例

＆＃13;

.navbar-form input:focus + .input-group-btn > .btn > i:before{
  content: "\f00d";
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form class="navbar-form navbar-left" role="search" style="padding-top: 42px;padding-left: 75px;">  
  <div class="input-group">
      <input style="  background: #f2f2f2;" type="text" class="form-control search" placeholder="search"  name="search" id="navbar-search-input">
    <div class="input-group-btn">
      <button type="button" id="btnSearch" style=" " class="btn btn-success btnSearch">
        <i class="fa fa-search">
        </i>
      </button>
    </div>
  </div>
</form>

＆＃13;

输入搜索焦点变化fa fa图标

1 个答案: