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

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

方法一

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

      *{
 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;
      }
    
  
  
    
      
    
  

方法二

使用 i 标签插入

      *{
 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;
      }
    
  
  
    
      
      
    
  

总结

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