两种方形搜索框美化

样式一

自定义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);
    }
});

样式2

自定义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);
    }
});

版权声明

站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请 联系我们 一经核实，立即删除。并对发布账号进行永久封禁处理。

---

本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。