偶然发现一些超赞的搜索框与按钮美化案例，特别适合资源类、搜索类网站使用。所以饺子就直接扒拉下来了 这是基于子比主题的叠加搜索组件优化方案，涵盖两大核心部分：发布作品按钮的精致重塑，以及透明搜索框的视觉升级，感兴趣的朋友不妨亲自体验一番。

使用教程 首先我们就是改：/zibll/inc/functions/zib-search.php 首先我们要改两个地方然后加上CSS就可以了第一处第二处自定义CSS样式 第三个地方就简单了，直接放到我们的 子比主题–>>自定义CSS样式 即可 文件一修改 搜：“ search-form ”，大概在548行的代码，如下图，跟我一样将代码注释或删掉，然后放入下面的代码

$form_html = '<form method="get" class="padding-10 search-form tengfei_search_frame" action="' . esc_url(home_url('/')) . '">' . $type_html . '<div class="line-form">' . $cat_html . $input_html . '</div></form>';

文件二修改

到了第二个地方，我们还是在：/zibll/inc/functions/zib-search.php 文件里面改

我们要搜下面的代码

esc_attr(strip_tags($args['s']));

然后我们搜到之后如下图注释然后换成我的代码，大概在525行如下图所示

代码如下

下面是CSS代码 放入子比后台自定义CSS即可

.tengfei_search_frame {
    border: 5px solid rgb(255 255 255 / 30%);
    border-radius: 45px;
    padding: 0;
    font-size: 15px;
}
.tengfei-search-button-red {
    background: #ff1856;
    right: 106%;
    position: absolute;
}
.tengfei-search-button-blue {
    background: #0088ff;
    border: 1px solid #33aaff;
    color: rgb(255, 255, 255);
    border-radius: 18px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    margin-right: -17px;
}