做一个好看的自定义搜索框

先上个效果图



话不多说直接上代码

     <div id="input">
        <input type="text" id="search" v-model="search" placeholder="请输入任务/事项关键字搜索" />
        <img class="search" @click="Search()" src="../../assets/Anxietong/search.png" />
      </div>


        
            .search {
              vertical-align: middle;
              width: 0.2rem;
              height: 0.2rem;
              margin-top: -0.02rem;
            }

            input::-webkit-input-placeholder {
              width: 80%;
              font-size: 0.13rem;
              color: rgba(194, 199, 204, 1);
            }
            
            #search {
              width: 80%;
              height: 0.2rem;
              font-size: 0.12rem;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              line-height: 0.4rem;
              margin-left: 0.11rem;
              padding-top: 0.11rem;
              border: 0px;
              outline: none;
            }
            
            #input {
              width: 92%;
              height: 0.4rem;
              background: rgba(255, 255, 255, 1);
              border-radius: 0.08rem;
              border-image: linear-gradient(
                  135deg,
                  rgba(255, 255, 255, 1),
                  rgba(206, 218, 237, 1)
                )
                1 1;
              display: inline-block;
              margin-left: 0.1rem;
              margin-top: 0.03rem;
            }

 关于搜索图片直接百度拿一下或者私我