子比主题 – 首页顶部搜索框美化（两款）
给子比的顶部搜索框加一个美化，我觉得这种方形的搜索框还是比较的好看的，喜欢的自行部署吧，一共是两款美化样式！第一款
第二款
代码部署
CSS代码放到：子比主题–>>自定义CSS样式，JS代码放到：子比主题–>>自定义javascript代码
CSS代码
.header-slider-search .line-form{
border-radius:5px;
}
.header-slider-search .line-form .abs-right button{
background: #0088ff;
color: rgb(255, 255, 255);
border-radius: 5px;
margin-right: -28px;
height: 51.28px;
padding: 10px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
}
@media(max-width: 767px) {
.header-slider-search .line-form .abs-right button {
height: 38px; /* 手机时的高度 */
}
}
.header-slider-search .line-form .abs-right .icon{
color:#fff;
}
JS代码
document.addEventListener("DOMContentLoaded", function () {
const button = document.querySelector(".search-input-text .abs-right button.null");
if (button) {
const searchText = document.createElement("span");
searchText.textContent = "搜索";
searchText.classList.add("search-text");
button.appendChild(searchText);
}
});
CSS代码
.search-form{
border: 5px solid rgb(255 255 255 / 30%);
border-radius: 5px;
padding: 0;
font-size: 15px;
}
.header-slider-search .line-form{
border-radius:0px;
}
.header-slider-search .line-form .abs-right button{
background: #0088ff;
color: rgb(255, 255, 255);
margin-right: -23px;
height: 46.42px;
padding: 10px;
}
@media(max-width: 767px) {
.header-slider-search .line-form .abs-right button {
margin-right: -16px;
height: 38px;
}
}
.header-slider-search .line-form .abs-right .icon{
color:#fff;
}
JS代码
document.addEventListener("DOMContentLoaded", function () {
const button = document.querySelector(".search-input-text .abs-right button.null");
if (button) {
const searchText = document.createElement("span");
searchText.textContent = "搜索";
searchText.classList.add("search-text");
button.appendChild(searchText);
}
});
页:
[1]