Koilee·好运锦鲤主题导航栏搜索框美化

原创

用户1094633

发布于 2022-02-14 17:22:24

8110

发布于 2022-02-14 17:22:24

文章被收录于专栏：运维随笔运维随笔

本站使用的锦鲤主题默认搜索导航框如下图，站长用久了以后感觉虽然节省了导航栏占用，对于自己感觉缺少了什么，找主题作者修改意义不大毕竟只有个别人喜欢，又不是全部都喜欢，何不趁此机会打造自己喜欢的搜索栏呢？

美化搜索栏

1、首先在主题设置界面功能自定义css里面定义css（这边感谢@李洋博客，此搜索栏格式借鉴它本站主题的搜索栏）

search-warp样式

CSS

.search-warp {
    position:relative;
    margin-left:auto;
    display:flex;
    align-items:center;
    float:right;
    height:66px;
    }

search-warp form样式

CSS

.search-warp form {
    position:relative;
    margin-left:auto;
    display:flex;
    align-items:center;
    }

input.search-input样式

CSS

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

CSS

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

CSS

.clearfix:after {
    clear:both;content:"";
    display:block;
    height:0;
    visibility:hidden;
    }

2、修改主题目录下的模板文件header.php，

找到以下默认的搜索栏代码块

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>

替换成如下打造的搜索栏代码

PHP

<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、美化后如下图