php怎么插入小图标,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里添加小图标的两种方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！