这是一款来自94设计的大气搜索框区块,是一款带有搜索功能的区块,理论上支持所有主题的搜索功能。

实现代码
<!--载入CSS样式-->
<link href="style.css" rel="stylesheet" type="text/css" />
<div class="page-section-content">
<div class="page-section-background">
</div>
<div class="n-box">
<!--文本-->
<div class="n-text">
<h1 class="index-title">
<!--分类统计--> Npcink </h1>
<h2 class="index-subtitle">
<!--副标题--> // 开通会员,海量UI设计源文件随心下载 // </h2>
</div>
<!--.n-text-->
<!--搜索-->
<div class="n-search">
<form method="get" id="searchform" action="?php echo esc_url( home_url() ) ?>">
<div class="container">
<div id="searchs">
<input type="text" placeholder="搜索素材" name="s" id="s" class="searchInput" />
<input class="n-button" type="submit" onclick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" value="搜索" />
</div>
</div>
</form>
</div>
<!--.n-search-->
<div class="remensousuo">
<div class="sousuocenter">
<span>热门搜索:</span>
<ul>
<li><a href="https://www.npc.ink/6663.html" class="shejipsd">psd素材</a></li>
<li><a href="https://www.npc.ink/6663.html" class="shejixd">xd素材</a></li>
<li><a href="https://www.npc.ink/6663.html" class="shejifigma">figma素材</a></li>
<li><a href="https://www.npc.ink/6663.html" class="shejisketch">sketch素材</a></li>
<li><a href="https://www.npc.ink/6663.html" class="shejisketch">ai素材</a></li>
</ul>
</div>
</div>
</div>
<!--.n-box-->
</div>
<!--.page-section-content-->
<style type="text/css" media="screen">
</style>
<script type="text/javascript">
$(document).ready(function(){
// 当鼠标聚焦在搜索框
$('#s').focus(
function() {
if($(this).val() == '输入关键字') {
$(this).val('').css({color:"#454545"});
}
}
// 当鼠标在搜索框失去焦点
).blur(
function(){
if($(this).val() == '') {
$(this).val('输入关键字').css({color:"#333333"});
}
}
);
});
</script>
如何使用
复制代码到需要的地方,例如古登堡的HTML区块或是小工具里面的“自定义HTML”,另外,记得看代码注释哦(。・∀・)ノ