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

古城微笑少年丶 2022-04-14 03:07 1645阅读 0赞

[https://blog.csdn.net/chengQunBin/article/details/78505654][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>

效果图：  
![20181123153306620.png][]

## 方法二 ##

使用 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>

效图：  
![20181123154127970.png][]

个人总结：

原理就是在input下面添加了底图，感觉第一种方法更好，可以少用元素

--------------------

扩展一下估计就可以实现如下图的录入错误提示了  
![1-XVZetm1skdL5b5csfWCVkg][]

[https_blog.csdn.net_chengQunBin_article_details_78505654]: https://blog.csdn.net/chengQunBin/article/details/78505654
[20181123153306620.png]: /images/20220414/8b78fb0d5d4442f8b5d3cf1199551bcb.png
[20181123154127970.png]: /images/20220414/4633ab6539874d2a9cd79d954449525e.png
[1-XVZetm1skdL5b5csfWCVkg]: /images/20220414/cb1d8697db814fa8b430c0f929b4c12e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1645人围观）

还没有评论，来说两句吧...

相关阅读

相关 html地址栏添加icon小图标

<link rel="shortcut icon" href="img/1.jpg" type="image/x-icon" /> ![20200119091344

冷不防/ 2023年07月01日 04:25/ 0 赞/ 22 阅读

相关 CSS动画效果——语音播放小喇叭（实用，赞）

原文出处：[https://www.jianshu.com/p/5a3cfcc764f5][https_www.jianshu.com_p_5a3cfcc764f5] 写业务

深碍√TFBOYSˉ_/ 2023年06月23日 05:57/ 0 赞/ 9 阅读

相关 TimeSpan格式化 (实用、赞）

原文出处：[https://blog.csdn.net/cxb2011/article/details/103538849/][https_blog.csdn.net_cxb2

雨点打透心脏的1/2处/ 2022年12月27日 08:38/ 0 赞/ 152 阅读

相关 Deepin启动器里添加软件图标

进入图标启动目录 cd /usr/share/applications 创建编辑图标文件 sudo vi firefox.desktop 根据你的二进制

浅浅的花香味﹌/ 2022年12月03日 05:28/ 0 赞/ 233 阅读

相关 input标签里添加相关属性详解

1.取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideFocus=true <input type="submit" value="提交

超、凢脫俗/ 2022年11月11日 05:17/ 0 赞/ 230 阅读

相关 MFC如何添加系统菜单（菜单添加小图标）

先来介绍一下要用到的函数（win32版）函数原型：HMENU GetSystemMenu(HWND hWnd,BOOL bRevert)；　　参数：　　hWvd：拥

我就是我/ 2022年05月22日 07:34/ 0 赞/ 1077 阅读

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

[https://blog.csdn.net/chengQunBin/article/details/78505654][https_blog.csdn.net_chengQu

古城微笑少年丶/ 2022年04月14日 03:07/ 0 赞/ 1646 阅读

相关 angular4 监听input框输入值的改变（实用、赞）

原文出处：[https://www.cnblogs.com/dennis0525/p/7631301.html][https_www.cnblogs.com_dennis052

我就是我/ 2022年04月10日 01:45/ 0 赞/ 565 阅读

相关实用色轮图（赞、实用）

原文出处：[https://www.jb51.net/photoshop/228718\_2.html][https_www.jb51.net_photoshop_228718

痛定思痛。/ 2021年12月12日 13:45/ 0 赞/ 320 阅读

相关 el-input placeholder添加icon图标

如下图，使用el-input想在placeholder增加icon图标 ![在这里插入图片描述][20210409153645317.png] [参考官方文档][Lin

矫情吗；*/ 2021年07月25日 20:54/ 1 赞/ 1654 阅读