子比主题 – 首页顶部搜索框美化（两款）

飞流 · 发表于 2025-10-8 22:50:24

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

×

给子比的顶部搜索框加一个美化，我觉得这种方形的搜索框还是比较的好看的，喜欢的自行部署吧，一共是两款美化样式！

第一款
tengfei_down (53).webp

第二款

代码部署
CSS代码放到：子比主题–>>自定义CSS样式，JS代码放到：子比主题–>>自定义javascript代码

第一款

CSS代码

复制代码

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代码

复制代码

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);
}
});

复制代码

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

[代码技巧] 子比主题 – 首页顶部搜索框美化（两款）