JS Input里添加小图标的两种方法

来源：九壹网

我们在做网页的时候，经常需要在input里面添加小图标，那么这里就介绍比较常见的两种方法。

方法一

将小图标当做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(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>
 <div class="box">
 <i class="icon-search"></i>
 <input type="text" class="username" value="搜索"/>
 </div>
 </body>

总结

以上所述是小编给大家介绍的JS Input里添加小图标的两种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！