有好多人觉得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);
}
});
样式二
自定义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);
}
});
© 版权声明
THE END
暂无评论内容