【uView】u-search搜索 改变样式

搜索改变样式

默认样式:

 期待的样式:

<view class="box d-flex">
   <u-search class="content" placeholder="请输入搜索内容" v-model="val" shape="square" bg-color="#fff" border-color="#D3D3D3" placeholder-color="#D6D6D6" :show-action="false"></u-search>
   <view class="btn" @click="to_search()"><i class="icon iconfont icon-ssk"></i></view>
</view>
.box {
    flex: 1;
    // 清空输入框右侧的圆角
    /deep/ .u-content {
        border-radius: 8rpx 0 0 8rpx!important;
    }
    // 输入框前方的放大镜
    /deep/ .u-icon-wrap {
        display: none;
    }
}

.btn {
    height: 64rpx;
    width:68rpx;
    line-height: 64rpx;
    text-align: center;
    background: #0268FA;
    border-radius: 0 8rpx 8rpx 0;
    color: #fff;
}

猜你喜欢

转载自blog.csdn.net/wuli_youhouli/article/details/121011059#comments_27336360
今日推荐