子比主题 – 分享一款简约搜索框样式

飞流 · 发表于 2025-10-10 16:52:27

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

这是一款子比主题简约的搜索框样式代码，搜索框右边带有自己网站的图标并且搜索非常方便，喜欢的自行部署吧！

tengfei_down - 2025-10-10T165144.645.webp

代码部署

里面的网站换成你自己的，放到：WP后台–>>外观–>>小工具–>>自定义HTML

<style>
*, *::before, *::after {
box-sizing: border-box;
}
#TFSO {
background: transparent;
box-shadow: none;
border-radius: 32px;
padding: 12px 24px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px;
}
#TFSO form {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
#TFSO_keyword {
width: 100%;
max-width: 520px;
height: 45px;
line-height: 45px;
font: 16px "Arial", "Microsoft YaHei", sans-serif;
padding: 0 16px 0 16px;
margin-right: 12px;
border: 2px solid #3EAF0E;
border-radius: 20px;
background: #f9f9f9 url(https://www.tfbkw.com/favicon.ico) no-repeat right 12px center;
background-size: 24px 24px;
transition: border-color 0.2s, box-shadow 0.2s;
}
#TFSO_keyword:focus {
border-color: #2e8b0e;
box-shadow: 0 0 0 2px #e6f9e6;
background-color: #fff;
outline: none;
}
#TFSO_keyword::placeholder {
color: #bbb;
opacity: 1;
}
#TFSO_submit {
width: 120px;
height: 45px;
line-height: 45px;
border: none;
color: #fff;
background: linear-gradient(90deg, #3FB30E 60%, #2e8b0e 100%);
font-weight: bold;
font-size: 16px;
border-radius: 20px;
padding: 0 18px;
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 8px rgba(63,179,14,0.08);
}
#TFSO_submit:hover {
background: linear-gradient(90deg, #2e8b0e 60%, #3FB30E 100%);
box-shadow: 0 4px 16px rgba(63,179,14,0.16);
}
@media (max-width: 600px) {
#TFSO {
padding: 8px 8px;
border-radius: 0;
}
#TFSO_keyword {
max-width: 160px;
font-size: 14px;
padding: 0 8px 0 8px;
}
#TFSO_submit {
width: 60px;
font-size: 14px;
padding: 0 8px;
height: 38px;
line-height: 38px;
}
}
</style>
<div id="TFSO">
<form method="get" id="searchform" action="https://www.tfbkw.com/">
<input type="text" name="s" id="TFSO_keyword" placeholder="搜索精品资源" />
<input type="submit" id="TFSO_submit" value="TF搜索" />
</form>
</div>

复制代码

	飞流：这论坛到底有没有资本给我投资一下啊！	07-20 22:07
	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22
	麦麦管家：请遵守版规社律，保护信息安全，请勿脱离平台交易，谨防网络诈骗！#帮助中心#	01-24 12:40

[代码技巧] 子比主题 – 分享一款简约搜索框样式

连续签到LV.1

起源之星

任务·年会员

累计签到LV.3

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

连续签到LV.1

起源之星

任务·年会员

累计签到LV.3

关于我们

常用功能

服务引导