焦点改变输入搜索发发图标

  • Z时代
  • 2024-01-10
  • 分类：问答

您好有人可以帮助我如何我可以改变焦点从搜索图标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>

回答：

的诀窍是使用+到选择下一个兄弟，请检查例子

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

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

以上是 焦点改变输入搜索发发图标 的全部内容， 来源链接： utcz.com/qa/257869.html

回到顶部