子比主题美化教程：顶部多功能组件｜两款方形搜索框美化代码教程

子比主题默认的顶部搜索框样式较为简约，整体视觉质感一般。相较于原版样式，方形结构的搜索框造型更加规整精致，适配各类博客、资源站、技术站的页面风格。本次教程为大家带来两款原创方形搜索框美化方案，分别搭配专属CSS样式与JS代码，可直接部署使用，轻松优化网站顶部搜索组件的视觉效果。

第一款方形搜索框美化样式

自定义CSS样式代码

将以下CSS代码添加至子比主题自定义样式区域，即可实现第一款圆角方形搜索框、蓝色搜索按钮的美化效果，同时适配手机端自适应样式。

自定义JavaScript代码

搭配下方JS代码，可在搜索按钮中添加可跳转的“搜索”文字链接，完善搜索组件的交互展示效果。

第二款方形搜索框美化样式

第二款样式为直角方形搜索框设计，边框自带透明白色描边效果，整体质感更简约高级，按钮尺寸、边距参数与第一款略有区别，同样适配移动端设备。

自定义CSS样式代码

自定义JavaScript代码

此版本JS代码简化了文字展示逻辑，直接在搜索按钮显示纯文字“搜索”，界面更加干净整洁。

四、代码部署注意事项

1. 代码均针对子比主题顶部多功能搜索组件开发，仅适配Zibll主题，其他主题请勿直接使用。

2. 部署时二选其一即可，无需同时添加两款样式代码，避免样式冲突导致页面错乱。

3. CSS代码添加至主题后台「自定义CSS」栏目，JS代码添加至主题自定义JavaScript区域，保存刷新即可生效。