vue , uni-app，微信小程序，app , 自定义搜索框, 好看的搜索框。自定义搜索按钮,搜索栏，左边输入框右边搜索按钮，搜索图标。element ui 电脑版发表于：2024/7/1 11:51 [TOC] ### 效果一 这个是小程序端的用的 设计图：  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; } } } ``` ### 效果二 这个是小程序端的用的 设计图：  view: ``` <view class="search-area"> <view class="seach-box"> <view class="seach-box-wrap"> <view class="seach-box-input"> <input class="uni-input" placeholder-class="seach-box-title-input" placeholder="请输入课程名称" /> </view> <view class="seach-box-icon"> <image :src="`${CssImgPath}/imgs/search.png`" class="seach-box-icon-content" /> </view> <!-- <view class="seach-box-but">查询</view> --> </view> </view> </view> ``` 样式： ``` .search-area { background: #ffffff; padding-left: 20rpx; padding-right: 20rpx; .seach-box { height: 61rpx; background: #f4f4f4; // background: #ffabcd; border-radius: 44rpx 44rpx 44rpx 44rpx; // 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; margin-right: 10rpx; // 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; } } } } ``` ### 效果三 这个是pc端的用的  **view:** ``` <div class="search-wapper"> <div class="lesson-search"> <el-input placeholder="请输入任务名称"></el-input> <div class="search-btn"> <el-icon color="#fff"> <Search /> </el-icon> </div> </div> </div> ``` 样式： ``` .search-wapper { display: flex; align-items: center; justify-content: flex-end; padding-top: 15px; padding-right: 15px; .lesson-search { width: 266px; height: 38px; display: flex; align-items: center; padding-left: 15px; border-radius: 19px; border: 1px solid #e7e7e9; .el-input { flex: 1; // 去掉el-input的边框 :deep(.el-input__wrapper) { border: none !important; box-shadow: none !important; } } .search-btn { width: 42px; height: 32px; text-align: center; padding-top: 5px; background: #1880ff; border-radius: 16px; margin-right: 2px; } } } ``` ### 效果四 这个是pc端的用的  **view:** ``` <div class="search-wapper"> <div class="lesson-search"> <label for="search-input"> <div class="lab">课程</div> <div class="icon"> <el-icon color="#60646E"> <CaretBottom /> </el-icon> </div> </label> <el-select id="search-input" v-model="selectLessonId" clearable filterable remote reserve-keyword placeholder="请输入课程名称"> <el-option v-for="item in lessonList" :key="item.lessonID" :label="item.lessonName" :value="item.lessonID" /> </el-select> <div class="search-btn"> <el-icon color="#fff"> <Search /> </el-icon> </div> </div> </div> ``` **样式：** ``` .search-wapper { display: flex; align-items: center; .lesson-search { width: 266px; height: 38px; display: flex; align-items: center; padding-left: 15px; border-radius: 19px; border: 1px solid #E7E7E9; label { display: flex; align-items: center; } .lab { font-family: Source Han Sans CN; font-weight: 400; font-size: 12px; color: #60646E; margin-right: 3px; } .icon { padding-top: 3px; } .el-select { flex: 1; :deep(.el-select__wrapper) { box-shadow: none; } :deep(.el-select__icon) { display: none; } :deep(.el-select__icon.el-select__clear) { display: block; } } .search-btn { width: 42px; height: 32px; text-align: center; padding-top: 5px; background: #1880FF; border-radius: 16px; margin-right: 2px; } } } ```
