zibll子比主题美化-子比主题小工具顶部多功能小工具组件搜索框美化代码|风雪源码

zibll子比主题美化-子比主题小工具顶部多功能小工具组件搜索框美化代码

2107字 11分钟 2025-03-15 小柚子 57 0 该作者已发布690篇文章

Mankind is made great or little by its own will.

一个人伟大或渺小，取决于他的意志力

子比主题美化前言

7b2的方形更加好看，所以用css和js写了两个样式，下面教程开始(作者苏晨博客网站)

第一种自定义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;
}
.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;
}
.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;
}

自定义JavaScript代码


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

自定义JavaScript代码


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);
    }
});
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);
    }
});
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 本站名称： 风雪源码
2 本站网址：www.fengxue.cc
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。

THE END