vue , uni-app，微信小程序，app , 自定义搜索框, 好看的搜索框。自定义搜索按钮,搜索栏，左边输入框右边搜索按钮，搜索图标。element ui

效果一

这个是小程序端的用的

设计图：

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;
    }
  }
}