摘要：
本站使用的锦鲤主题默认搜索导航框如下图，站长用久了以后感觉虽然节省了导航栏占用，对于自己感觉缺少了什么，找主题作者修改意义不大毕竟只有个别人喜欢，又不是全部都喜欢，何不趁此机会打造... 本站使用的锦鲤主题默认搜索导航框如下图，站长用久了以后感觉虽然节省了导航栏占用，对于自己感觉缺少了什么，找主题作者修改意义不大毕竟只有个别人喜欢，又不是全部都喜欢，何不趁此机会打造自己喜欢的搜索栏呢？
美化搜索栏
1、首先在主题设置界面功能自定义css里面定义css（这边感谢@李洋博客，此搜索栏格式借鉴它本站主题的搜索栏）
search-warp样式
.search-warp {
position:relative;
margin-left:auto;
display:flex;
align-items:center;
float:right;
height:66px;
}search-warp form样式
.search-warp form {
position:relative;
margin-left:auto;
display:flex;
align-items:center;
}input.search-input样式
input.search-input {
background:#ebeef5;
width:170px;
height:34px;
border:1px solid transparent;
padding:0 18px;
color:#606266;
transition:background 0.35s,border-color 0.35s,padding-right 0.35s;
border-radius:17px 0 0 17px;}button.showhide-search样式
button.showhide-search {
position:relative;
z-index:1;height:34px;
border:none;
background:#42a1ff;
color:#fff;
border-radius:0 17px 17px 0;
padding:0 10px;
cursor:pointer;
-webkit-appearance:none;
font-size:13px;
}clearfix:after样式
.clearfix:after {
clear:both;content:"";
display:block;
height:0;
visibility:hidden;
}2、修改主题目录下的模板文件header.php，
找到以下默认的搜索栏代码块
<div class="search_top">
<a href="javascript:;" title="点击搜索"><i class="fa fa-search"></i></a>
<div class="top_search ">
<form method="post" name="search" action="{$host}zb_system/cmd.php?act=search" class="searchform">
<input type="text" name="q" placeholder="输入关键字..." class="text">
<input type="submit" class="btn" value="搜索"></form>
</div>
</div>替换成如下打造的搜索栏代码
<div class="search-warp clearfix">
<form method="post" name="search" action="{$host}zb_system/cmd.php?act=search">
<input class="search-input" placeholder="请输入关键字" type="text" name="q">
<button class="showhide-search" type="submit">Search</button>
</form>
</div>3、美化后如下图
