⼩程序不错的搜索框样式，复制可⽤wxml
wxss <view class="weui-search-bar">
<view class="weui-search-bar__form">
<view class="weui-search-bar__box">
<icon class="weui-icon-search_in-box"type="search"size="14"></icon>
<input type="text"class="weui-search-bar__input"placeholder="请输⼊查询内容"value="{{SearchData.value}}"bindinput='SearchInput'bindconfirm <view class="weui-icon-clear"wx:if="{{SearchData.value.length > 0}}"bindtap="SearchClear">
<icon type="clear"size="14"></icon>
</view>
</view>
</view>
<view class="weui-search-bar__cancel-btn"bindtap="SearchConfirm">
<text wx:if="{{SearchData.value.length>0}}"data-key='search'>搜索</text>
<text wx:else data-key='back'>返回</text>
</view>
</view>
.weui-search-bar{
position: relative;
padding: 8px 10px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
box-sizing: border-box;
background-color:#efeff4;
border-top: 1rpx solid #d7d6dc;
border-bottom: 1rpx solid #d7d6dc;
}
.weui-icon-search{
margin-right: 8px;
font-size: inherit;
}
.weui-icon-search_in-box{
position: absolute;
left: 10px;
top: 7px;
}
.weui-search-bar__form{
position: relative;
-webkit-box-flex: 1;
-webkit-flex: auto;
flex: auto;
border-radius: 5px;
background:#fff;
border: 1rpx solid #e6e6ea;
}
.weui-search-bar__box{
position: relative;
padding-left: 30px;
padding-right: 30px;
width: 100%;
box-sizing: border-box;
z-index: 1;
borderbox}
.weui-search-bar__input{
height: 28px;
line-height: 28px;
font-size: 14px;
}
.weui-icon-clear{
position: absolute;
top: 0;
right: 0;
padding: 7px 8px;
font-size: 0;
}
.weui-search-bar__label{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
border-radius: 3px;
text-align: center;
color:#9b9b9b;
background:#fff;
line-height: 28px;
}
.weui-search-bar__cancel-btn{  margin-left: 10px;
line-height: 28px;
color:#DC3C24;
white-space: nowrap;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。