搜索框样式 及form提交实现
第一种风格
.js
bt_search(e){
console.log('搜索',e)
},
.wxml
<form bindsubmit="bt_search">
<view class="view_search">
<view class="view_icon_input">
<icon class="searchcion" size='15' type='search'></icon>
<!-- 注意:input必须要设置name,否则form提交时候会获取不到 -->
<input class="input_search" name='searchValue' placeholder="请输入姓名" value="{{searchValue}}" />
</view>
<view>
<button class='bt_sousuo' form-type="submit">搜索</button>
</view>
</view>
</form>
.wxss
/* ****搜索**** begin*/
.view_search {
width: 100%;
display: flex;
flex-direction: row;
margin-top: 20rpx;
margin-bottom: 20rpx;
align-items: center;
justify-content: center;
}
.view_icon_input {
/* border: 1px solid #d0d0d0; */
border-radius: 50rpx;
width: 85%;
display: flex;
flex-direction: row;
background-color: #ebebeb;
}
.input_search {
margin-left: 70rpx;
height: 70rpx;
width: 450rpx;
/* margin-left: 10rpx; */
/* border-radius: 10px; */
}
.bt_sousuo {
/* 搜索按钮 */
width: 150rpx;
height: 70rpx;
color: #ff4d4d;
background-color: rgb(255, 241, 241);
border-radius: 98rpx;
font-size: 35rpx;
margin: 0rpx 10rpx 0rpx 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
/* 搜索按钮-为了不出现按钮边框断线 */
.bt_sousuo::after {
/* 圆角 */
border-radius: 98rpx;
/* 取消边框 */
/* border: 0; */
}
.searchcion {
/* 搜索图标 */
margin: 15rpx 15rpx 15rpx 15rpx;
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
text-align: center;
}
/* ****搜索**** end*/
第二种风格
.wxml
<view class="view_search">
<view class="view_icon_input">
<icon class="searchcion" size='20' type='search'></icon>
<input class="input_search" placeholder="请输入姓名、身份证号" value="{{searchValue}}" bindblur="input_search" />
<view class='sousuo' bindtap="bt_search"><text style="color:#fff">搜索</text></view>
</view>
</view>
.wxss
/* ****搜索**** begin*/
.view_search{
width: 96%;
display: flex;
flex-direction: row;
/* margin-top: 20rpx; */
/* margin-bottom: 20rpx; */
align-items: center;
justify-content: center;
padding: 2%;
}
.view_icon_input{
/* border: 1px solid #d0d0d0; */
width: 100%;
border-radius: 50rpx;
display: flex;
flex-direction: row;
background-color: #ebebeb;
align-items: center;
/* justify-content: center; */
}
.input_search{
margin-left: 70rpx;
height: 70rpx;
width: 100%;
/* border-radius: 10px; */
}
.sousuo {
margin-left: 30rpx;
margin-right: 10rpx;
width: 20%;
height: 50rpx;
line-height: 50rpx;
text-align: center;
background-color: #41A5F5;
/* border: 1px solid #d0d0d0; */
border-radius: 50rpx;
padding: 5rpx;
font-size: small;
}
.searchcion {
margin: 0rpx 15rpx 0rpx 15rpx;
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
text-align: center;
}
/* ****搜索**** end*/