小程序搜索佈局

wxml

<view class='searchBox'>
    <view class='search'>
        <icon size='15' type='search' class='searchIcon'></icon>
        <input class='searchInput' type='text' placeholder='請輸入關鍵字'></input>
    </view>
</view>

wxss

.searchBox{
    height: 100rpx;
    width: 100%;
    position: relative;
    padding: 20rpx 0;
    box-sizing: border-box;
}
.search{
    display: flex;
    width: 75%;
    margin: 0 auto;
    height: 60rpx;
    line-height: 60rpx;
    border: 1px solid #ddd;
    border-radius: 30rpx;
    background: #fff;
}
.searchIcon{
    padding: 15rpx 30rpx 0 15rpx;
    box-sizing: border-box;
}
.searchInput{
    width: 80%;
    height: 100%;
    padding: 5rpx;
    box-sizing: border-box;
}