B2主题首页搜索框美化代码HTML+CSS

效果图：

废话不多说，直接上代码：

HTML部分：

<div id="home-row-ssss" class=" home_row home_row_2 module-search home_row_bg_img" style="background-color:;background-image:url(https://cdn.cdnjson.com/tva2.sinaimg.cn/large/008qcEpJly1h8y6j4nkj6j31jk111ag1.jpg);">
<div class="" style="width:100%">
<div class="home-row-left content-area ">
<div data-i="3" id="search-module-3" class="search-module search-3">
<div class="search-module-title" style="color: rgb(255, 255, 255);">搜索你需要的素材</div>
<div class="search-module-desc" style="color: rgb(255, 255, 255);"></div>
<div class="search-module-box">
<form method="get" action="https://#" autocomplete="off" class="search-module-form">
<div><input type="text" name="s" placeholder="比如：过期米线线喵，水淼Aqua，蠢沫沫，桜井宁宁，鱼子酱，秀人网合集" class="search-module-input"> <input type="hidden" name="type" value="post"></div> <button class="search-button-action"><i class="b2font b2-search-line "></i></button>
</form>
</div>
<div class="search-module-key">
<ul>
<li style="color: rgb(255, 255, 255);">热门搜索：</li>
<li class="search-key"><a href="/?s=神楽坂真冬" target="_blank" style="color: rgb(255, 255, 255);">神楽坂真冬</a></li>
<li class="search-key"><a href="/?s=桜井宁宁" target="_blank" style="color: rgb(255, 255, 255);">桜井宁宁</a></li>
<li class="search-key"><a href="/?s=艾迪林" target="_blank" style="color: rgb(255, 255, 255);">艾迪林</a></li>
<li class="search-key"><a href="/?s=杨晨晨" target="_blank" style="color: rgb(255, 255, 255);">杨晨晨</a></li>
<li class="search-key"><a href="/?s=芝芝Booty" target="_blank" style="color: rgb(255, 255, 255);">芝芝Booty</a></li>
<li class="search-key"><a href="/?s=森萝财团" target="_blank" style="color: rgb(255, 255, 255);">森萝财团</a></li>
<li class="search-key"><a href="/?s=秀人网合集" target="_blank" style="color: rgb(255, 255, 255);">秀人网合集</a></li>
<li class="search-key"><a href="/?s=Candydoll" target="_blank" style="color: rgb(255, 255, 255);">Candydoll</a></li>
<li class="search-key"><a href="/?s=蠢沫沫" target="_blank" style="color: rgb(255, 255, 255);">蠢沫沫</a></li>
<li class="search-key"><a href="/?s=阿包也是兔娘" target="_blank" style="color: rgb(255, 255, 255);">阿包也是兔娘</a></li>
<li class="search-key"><a href="/?s=水淼Aqua" target="_blank" style="color: rgb(255, 255, 255);">水淼Aqua</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>

CSS部分：

<style>
/*搜索模块*/
.search-module-form ul{
position: absolute;
top: 60px;
background: #fff;
padding: 8px 8px 0 8px;
z-index: 10;
}
.search-module-form ul li{
font-size: 12px;
padding:8px 16px;
margin-bottom:8px;
cursor: pointer;
}
.search-module-form ul li.picked,.search-module-form ul li:hover{
background: #F5F6F7;
}
.search-module-form{
background: #fff;
position: relative;
width: 60%;
}
.search-module-key{
width: 60%;
margin:16px auto 0 auto
}
.search-module-form input{
border:0;
width:-webkit-fill-available;
height:52px;
padding:0 8px
}
.search-module-form > div{
display: flex;
}
.picked-category{
display: flex;
white-space: nowrap;
align-items: center;
font-size: 12px;
padding: 12px;
background: #f1f1f1;
margin: 8px;
height: 36px;
box-sizing: border-box;
cursor: pointer;
}
.search-module-form .search-button-action i{
font-size: 30px;
}
.search-module-box{
display: flex;
justify-content: center;
}
.search-module-title{
font-size: 44px;
text-align: center;
font-weight: 200;
}
.search-module-desc{
font-size: 13px;
margin:45px auto 24px auto;
text-align: center;
max-width: 50%;
}
.search-module-form .search-button-action{
top: 1px;
right: 0;
color: initial;
background: #fff;
}
.search-module-key ul{
display: flex;
font-size: 12px;
flex-flow: wrap;
}
.search-module-key ul li{
margin-right:8px;
opacity: .6;
margin-bottom:8px
}
.search-module-key ul li.search-key{
opacity: 1;
cursor: pointer;
}
.search-module{
padding:40px 0
}
.home_row.module-search{
background-image: inherit ;
}
.home_row.home_row_bg_img:before {
content: '';
background: url(images/pattern.png);
width: 100%;
height: 100%;
position: absolute;
top: 0;
opacity: .2;
}
.b2tooltip{
font-size: 13px;
position: absolute;
background: rgba(18, 18, 18, 0.8);
padding: 0 10px;
height:26px;
line-height: 26px;
color: #ffffff;
display: none;
max-width: 265px;
border-radius: 4px;
z-index: 999;
}
.entry-content table td{white-space: normal;}
.wp-block-table .has-fixed-layout {
table-layout: inherit;
}
.entry-content table td{
white-space: inherit;
}
.entry-content .yarpp-related .yarpp-thumbnail-title{
font-size: 13px;
}
.entry-content .yarpp-thumbnails-horizontal .yarpp-thumbnail{
height:180px
}
.entry-content .yarpp-related ol{
background-color: #f5f6f7;
padding:16px
}
.entry-content .yarpp-related ol li + li{
margin-top:10px
}
.entry-content .yarpp-related a{
font-size: 14px;
color:inherit;
font-weight: normal;
}
.entry-content .yarpp-related h3{
font-weight: 400;
font-size: 14px;
}
.entry-content .post-note {
font-size: 13px;
line-height: 1.8em;
padding: 15px;
background: #eef7ff;
margin-bottom: 0;
}
.entry-content b{
font-weight: bold;
}
.entry-content .content-cap p:empty{
display:none
}
</style>

未经允许不得转载、如有侵权留言回复：：有点鬼东西 » B2主题首页搜索框美化代码HTML+CSS