[英]Input search on focus change fa fa icon
Hi there can someone please help me how can I change on focus from search icon to x icon this is my code: 嗨,有人可以帮我,如何将焦点从搜索图标更改为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>
The trick is use + to select the next sibling, please check the example 诀窍是使用+选择下一个同级,请检查示例
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.