方法一
将小图标当做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> <p class="box"> <input type="text" class="username" value="搜索"/> </p> </body>
方法二
使用 i 标签插入
<style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 200px; position: relative; } .box .icon-search{ background: url(image/search.gif) no-repeat; width: 20px; height: 20px; position: absolute; top: 6px; left: 0; } .box .username{ padding-left: 30px; height: 25px; } </style> </head> <body> <p class="box"> <i class="icon-search"></i> <input type="text" class="username" value="搜索"/> </p> </body>
相关推荐：
js 仿支付宝input输入显示数字放大镜
javascript input输入框模糊提示功能详解
区别input框和按钮的方法
以上就是两种js实现input里添加小图标的方法的详细内容。