#热门
子比美化 – 方形搜索框美化

2025-10-04 0 473

有好多人觉得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;
}

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

 

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

© 版权声明

星聚源码网 子比美化 子比美化 – 方形搜索框美化 https://www.xjuym.cn/815.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

星聚源码网

QQ扫码进入[资源网交流群]

进群免费解答问题~~

快来加入吧~

我知道了