tnblog
首页
登录

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

148人阅读 2020/7/8 15:50 总访问:7606 评论:0 手机 收藏
分类: 前端

先上个效果图



话不多说直接上代码


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

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


评价
若人生只如初见,愿还是相遇的那个下午,阳光明媚转身一笑便如春暖花开
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2020TNBLOG.NET