搜索栏
用法
| Class类 |
描述 |
| .baie-search-bar |
父元素，创建容器 |
| .baie-search-bar__form |
子元素，设置form样式 |
| .baie-search-bar__box |
次子元素，设置搜索框样式 |
| .baie-search-bar__input |
次次子元素，设置搜索表单样式 |
| .baie-icon_clear |
次次子元素，设置清除按钮样式 |
| .baie-search-bar__label |
次子元素，设置label层样式，绝对定位在最顶层，点击后消失 |
| .baie-icon_search |
次次子元素，设置搜索图标样式 |
| .baie-search-bar__cancel-btn |
子元素，设置取消搜索按钮样式 |
示例
HTML
<div class="baie-search-bar" id="searchBar">
<form class="baie-search-bar__form">
<div class="baie-search-bar__box">
<i class="baie-icon_search"></i>
<input type="search" class="baie-search-bar__input" id="searchInput" placeholder="搜索" required="">
<a href="javascript:" class="baie-icon_clear" id="searchClear"></a>
</div>
<label class="baie-search-bar__label" id="searchText">
<i class="baie-icon_search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="baie-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="baie-cells searchbar-result" id="searchResult" style="display: none">
<div class="baie-cell baie-cell_access">
<div class="baie-cell__bd baie-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
<div class="baie-cell baie-cell_access">
<div class="baie-cell__bd baie-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
<div class="baie-cell baie-cell_access">
<div class="baie-cell__bd baie-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
<div class="baie-cell baie-cell_access">
<div class="baie-cell__bd baie-cell_primary">
<p>实时搜索文本</p>
</div>
</div>
</div>
CSS
.baie-search-bar {
position: relative;
padding: .16rem .20rem;
display: -webkit-box;
display: -webkit-flex;
display: flex;
box-sizing: border-box;
background-color: #EFEFF4;
}
.baie-search-bar:before {
content: " ";
position: absolute;
left: 0;
top: 0;
right: 0;
height: 1px;
border-top: 1px solid #D7D6DC;
color: #D7D6DC;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.baie-search-bar:after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 1px;
border-bottom: 1px solid #D7D6DC;
color: #D7D6DC;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.baie-search-bar.baie-search-bar_focusing .baie-search-bar__cancel-btn {
display: block;
}
.baie-search-bar.baie-search-bar_focusing .baie-search-bar__label {
display: none;
}
.baie-search-bar__form {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: auto;
flex: auto;
background-color: #EFEFF4;
}
.baie-search-bar__form:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
border-radius: .20rem;
border: 1px solid #E6E6EA;
box-sizing: border-box;
background: #FFFFFF;
}
.baie-search-bar__box {
position: relative;
padding-left: .60rem;
padding-right: .60rem;
height: 100%;
width: 100%;
box-sizing: border-box;
z-index: 1;
}
.baie-search-bar__box .baie-search-bar__input {
padding: .08rem 0;
width: 100%;
height: .4rem;
border: 0;
font-size: .28rem;
line-height: .4rem;
box-sizing: content-box;
background: transparent;
}
.baie-search-bar__box .baie-search-bar__input:focus {
outline: none;
}
.baie-search-bar__box .baie-icon_search {
position: absolute;
left: .20rem;
top: .06rem;
width: .44rem;
height: .44rem;
line-height: .56rem;
}
.baie-search-bar__box .baie-icon_clear {
position: absolute;
top: 0;
right: 0;
padding: 0 .20rem;
line-height: .56rem;
}
.baie-search-bar__label {
position: absolute;
top: .06rem;
right: .01rem;
bottom: .01rem;
left: .01rem;
z-index: 2;
border-radius: .06rem;
text-align: center;
color: #9B9B9B;
background: #FFFFFF;
}
.baie-search-bar__label span {
display: inline-block;
font-size: .28rem;
vertical-align: middle;
}
.baie-search-bar__label .baie-icon_search {
margin-right: .10rem;
width: .44rem;
height: .44rem;
}
.baie-search-bar__cancel-btn {
display: none;
margin-left: .20rem;
line-height: .56rem;
color: #eb5403;
white-space: nowrap;
}
.baie-search-bar__input:not(:valid) ~ .baie-icon_clear {
display: none;
}