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

最新推荐文章于 2025-02-15 00:23:42 发布

chelen_jak

最新推荐文章于 2025-02-15 00:23:42 发布

阅读量2.2w

点赞数 14

分类专栏： CSS 实用赞

实用同时被 3 个专栏收录

738 篇文章

订阅专栏

205 篇文章

订阅专栏

CSS

191 篇文章

订阅专栏

本文介绍两种使用CSS在输入框中插入图标的方法。第一种是将图标作为输入框的背景，第二种是利用i标签插入图标。两种方法均可美化界面并提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

效图：