这段CSS代码定义了一个搜索栏组件的样式和行为。当焦点在搜索框上时，显示取消按钮并隐藏提示标签。搜索图标和清除图标的位置、大小都有详细规定，输入框的样式和交互也进行了定制，例如去除默认装饰、设置聚焦状态和输入无效时隐藏清除按钮。整体设计考虑了用户体验和视觉效果。
.weui-search-bar {
position:relative;
padding:8px;
display:flex;
box-sizing:border-box;
background-color:red;
-webkit-text-size-adjust:100%;
align-items:center;
}
.weui-search-bar.weui-search-bar_focusing .weui-search-bar__cancel-btn {
display:block;
}
.weui-search-bar.weui-search-bar_focusing .weui-search-bar__label {
display:none;
}
.weui-search-bar .weui-icon-search {
width:16px;
height:16px;
}
.weui-search-bar__form {
position:relative;
flex:auto;
background-color:#FFFFFF;
border-radius:4px;
}
.weui-search-bar__box {
position:relative;
padding-left:28px;
padding-right:32px;
height:100%;
width:100%;
box-sizing:border-box;
z-index:1;
}
.weui-search-bar__box .weui-search-bar__input {
padding:8px 0;
width:100%;
height:1.14285714em;
border:0;
font-size:14px;
line-height:1.14285714em;
box-sizing:content-box;
background:transparent;
caret-color:#006cff;
}
.weui-search-bar__box .weui-search-bar__input:focus {
outline:none;
}
.weui-search-bar__box .weui-icon-search {
position:absolute;
top:50%;
left:8px;
margin-top:-8px;
}
.weui-search-bar__box .weui-icon-clear {
position:absolute;
top:50%;
right:0;
margin-top:-16px;
padding:8px;
width:16px;
height:16px;
mask-size:16px;
}
.weui-search-bar__label {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
font-size:0;
border-radius:4px;
line-height:32px;
text-align:center;
color:#999;
background:#FFFFFF;
}
.weui-search-bar__label span {
display:inline-block;
font-size:14px;
vertical-align:middle;
}
.weui-search-bar__label .weui-icon-search {
margin-right:4px;
}
.weui-search-bar__cancel-btn {
display:none;
margin-left:8px;
line-height:28px;
color:yellow;
white-space:nowrap;
}
.weui-search-bar__input:not(:valid) ~ .weui-icon-clear {
display:none;
}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration {
display:none;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
