1、带图标的搜索框实现,首先引入bootstarp环境,引入图标库
<link rel="stylesheet" href="assets/vendor/select2-bootstrap-theme/select2-bootstrap.min.css" />
<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />
<script src="assets/vendor/jquery/jquery.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.js"></script>
2、html页面写法
写一个div容器,然后将内容添加进入div容器,如下所示:
<div class='col-sm-3'>
<span class="inputSearch" id="searchInput">
<input type="text" class="form-control input-sm" id='search' name="search" value="" placeholder="Search" autocomplete="on"/>
</span>
<span class="searchTubiao" id="searchTubiao">
<a href="#" title="搜索" class="fa fa-search" id="tubiao"></a>
</span>
</div>
css样式设置,宽度以及偏移距离根据实际情况决定:
<style>
/*带搜索图标的搜索框样式*/
#searchInput{float: left;width:235.25px;}
#searchInput .form-control{border: 1px solid #AAAAAA;}
#searchInput .search{border: 1px solid #0088CF;}
#searchTubiao{float:left;font-size:16px;margin-left:-20px;margin-top:2px;}
#searchTubiao a{color:#AAAAAA;text-decoration:none;}
#searchTubiao a:hover {text-decoration:none;color: #0088CF;}
#searchTubiao .tubiao{color: #0088CF;}
</style>
设置样式的js如下:
<script type="text/javascript">
$("#search").focus(function(){
$("#search").addClass("search");
$("#tubiao").addClass("tubiao");
});
$("#search").blur(function(){
$("#search").removeClass("search");
$("#tubiao").removeClass("tubiao");
})
</script>
一个简单的input框内嵌图标的搜索框实现样式如下:
获得焦点时:
没有获取焦点并且鼠标在搜索图标外部时的样式:
没有获取焦点,鼠标在搜索图标上时的样式:
谨以此博客,记录一次小小的实践。