首页搜索栏按钮&透明边框美化-记录

效果展示：󠄐󠄹󠅀󠄪󠄣󠄞󠄡󠄣󠄤󠄞󠄡󠄡󠄠󠄞󠄤󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄤󠄣󠄧󠄣󠄡󠄦󠄩󠄢󠄬󠅒󠅢󠄟󠄮󠇕󠆬󠅰󠇕󠆯󠅳󠇕󠆞󠆍󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮

首先我们要知道改哪个文件，需要修改的文件为：/KaiXinBao/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行

$s          = esc_attr(strip_tags($args['s']));
        $input_html = '<div class="search-input-text">
                <input type="text" name="s" class="line-form-input" tabindex="1" value="' . $s . '"><i class="line-form-line"></i>
                <div class="scale-placeholder' . ($s ? ' is-focus' : '') . '" default="' . $args['placeholder'] . '">' . $args['placeholder'] . '</div>
                <div class="abs-right muted-color">
                
                <button class="btn tengfei-search-button-red"><a href="/newposts" style="color: rgb(255, 255, 255);">文章投稿</a></button>
                
                <button type="submit" name="" class="btn tengfei-search-button-blue">搜索文章</button>
                </div>
            </div>';

步骤三

直接把下面CSS代码填到自定义CSS即可

/*首页搜索栏按钮&透明边框美化css部分*/
.tengfei_search_frame {
    border: 5px solid rgb(255 255 255 / 40%);
    border-radius: 45px;
    padding: 15;
    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: -10px;
}

󠄐󠄹󠅀󠄪󠄣󠄞󠄡󠄣󠄤󠄞󠄡󠄡󠄠󠄞󠄤󠄬󠅒󠅢󠄟󠄮󠄐󠅅󠄹󠄴󠄪󠄾󠅟󠅤󠄐󠄼󠅟󠅗󠅙󠅞󠄬󠅒󠅢󠄟󠄮󠅄󠅙󠅝󠅕󠄪󠄡󠄧󠄤󠄣󠄧󠄣󠄡󠄦󠄩󠄢󠄬󠅒󠅢󠄟󠄮󠇕󠆬󠅰󠇕󠆯󠅳󠇕󠆞󠆍󠄐󠇗󠅹󠅸󠇖󠆍󠅳󠇖󠅹󠅰󠇖󠆌󠅹󠄬󠅒󠅢󠄟󠄮