html+css 带图片的搜索框

刘梦凡呀

已于 2022-08-16 10:43:53 修改

阅读量2.9k

点赞数 2

分类专栏： Layui 文章标签： css css3 前端

于 2022-08-05 15:53:09 首次发布

本文链接：https://blog.csdn.net/qq_42782011/article/details/126179265

版权

Layui 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

最近写B/S项目比较忙，很久没更新，今天分享一个B/S比较常见的带图片的搜索框代码。希望可以对你们有所帮助。

效果图先展示一下：
在这里插入图片描述
图片用的是阿里巴巴矢量图标库的图，需要用到的话，直接拷贝到代码里面就可以用了。

话不多说，上代码：

html:

   <div class="wx-index">
                    <div class="wx-index-search">
                        <div class="icon">
                        <svg t="1659685131507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2555" width="32" height="32"><path d="M454.656 849.92C231.424 849.92 51.2 668.672 51.2 445.44 51.2 223.232 231.424 41.984 454.656 41.984c222.208 0 403.456 181.248 403.456 403.456C858.112 668.672 676.864 849.92 454.656 849.92z m0-746.496C266.24 103.424 112.64 257.024 112.64 445.44s153.6 342.016 342.016 342.016 342.016-153.6 342.016-342.016-153.6-342.016-342.016-342.016z" fill="#4C4C4C" p-id="2556"></path><path d="M942.08 1008.64c-12.288 0-23.552-4.096-32.768-13.312L737.28 822.272c-18.432-18.432-18.432-47.104 0-65.536s47.104-18.432 65.536 0l172.032 172.032c18.432 18.432 18.432 47.104 0 65.536-9.216 9.216-20.48 14.336-32.768 14.336z" fill="#FFA028" p-id="2557"></path></svg>
                        </div>
                        <input v-model="search" placeholder="搜索" />
                    </div>
                </div>

css部分：

<style type="text/css">



    .wx-index {
        font-size: 16px;
        padding: 10px 16px;
        margin: 2px 0;
    }

    .wx-index-search {
        display: flex;
        height: 40px;
        border: 1px solid #eaeaea;
        -webkit-box-shadow: 0px 5px 5px #f5f5f5;
        -moz-box-shadow: 0px 5px 5px #f5f5f5;
        box-shadow: 0px 5px 5px #f5f5f5;
        border-radius: 20px;
    }

    .icon {
        width: 30px;
        margin: 3px 8px;
        /* height: 40px; */
        line-height: 40px;
        text-align: center;
    }


    .search-icon {
        width: 20px;
        height: 20px;
        color: #e4e4e4;
    }


    input {
        flex: 1;
        width: 100%;
        border: 0;
        outline: none;
        word-spacing: normal;
        text-transform: none;
        text-indent: 0px;
        text-shadow: none;
        background-color: transparent;
        cursor: text;
        margin: 0em;
        padding: 10px 0 10px 0;
        overflow: hidden;
        margin-left: 5%;
    }


    ::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #e2e2e2;
        font-size: 16px;
    }



    ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #e2e2e2;
        font-size: 16px;
    }
    

    :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #e2e2e2;
        font-size: 16px;
    }


</style>