子比主题 – 分享一款简约搜索框样式
这是一款子比主题简约的搜索框样式代码，搜索框右边带有自己网站的图标并且搜索非常方便，喜欢的自行部署吧！代码部署
里面的网站换成你自己的，放到：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>
页:
[1]