uni-app,微信小程序,app , 自定义搜索框, 好看的搜索框 电脑版发表于:2024/7/1 11:51 设计图: ![](https://img.tnblog.net/arcimg/aojiancc2/4da057284483481fae0b432a399e9a6e.png) view: ``` <view class="seach-box"> <view class="seach-box-wrap"> <view class="seach-box-icon"> <image :src="`${CssImgPath}/imgs/search.png`" class="seach-box-icon-content" /> </view> <view class="seach-box-input"> <input class="uni-input" placeholder-class="seach-box-title-input" placeholder="请输入学生姓名" /> </view> <view class="seach-box-but">查询</view> </view> </view> ``` 样式: ``` .seach-box { height: 90rpx; background: #FFFFFF; // background: #ffabcd; border-radius: 45rpx 45rpx 45rpx 45rpx; // display: flex; line-height: 90rpx; display: flex; flex-direction: row; align-items: center; /* 垂直居中 */ .seach-box-wrap { display: flex; width: 100%; padding-left: 30rpx; padding-right: 20rpx; .seach-box-icon { width: 27rpx; height: 66rpx; line-height: 66rpx; // background-color: #5EC6A7; display: flex; align-items: center; .seach-box-icon-content { width: 38rpx; height: 30rpx; } } .seach-box-input { flex: 1; display: flex; align-items: center; // background-color: burlywood; margin-left: 16rpx; .uni-input { width: 100%; } } .seach-box-but { color: #FFFFFF; text-align: center; line-height: 66rpx; height: 66rpx; width: 120rpx; background: #5EC6A7; border-radius: 32rpx 32rpx 32rpx 32rpx; } } } ```