input里添加小图标（实用、赞）

https://blog.csdn.net/chengQunBin/article/details/78505654 方法一将小图标当做input的背景来插入，直接上代码吧：<style type="text/css">*{margin: 0;padding: 0;...

chelen_jak

21645人浏览 · 2018-11-23 15:47:34

chelen_jak · 2018-11-23 15:47:34 发布

https://blog.csdn.net/chengQunBin/article/details/78505654

方法一

将小图标当做input的背景来插入，直接上代码吧：

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            input{
                border: none;
            }
            .box{
                height: 50px;
                background: yellow;
            }
            .box input{
                width: 200px;
                height: 30px;
                border-radius: 15px;
                margin: 10px 0;
                background: url(image/search.gif) no-repeat;
                background-color: white;
                background-position: 3px;
                padding-left: 30px;
                border: 1px solid black;
                outline: none;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <input type="text" class="username" value="搜索"/>
        </div>
    </body>

效果图：

方法二

使用 i 标签插入

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            position: relative;
        }

            .box .icon-search {
                background: url(find.png) no-repeat;
                width: 30px;
                height: 50px;
                position: absolute;
                top: -1px;
                left: 0;
            }

            .box .username {
                padding-left: 30px;
                height: 25px;
            }
    </style>
    </head>
    <body>
        <div class="box">
            <i class="icon-search"></i>
            <input type="text" class="username" value="搜索"/>
        </div>
    </body>

效图：