微客导航 » 文章资讯 » JS Input里添加小图标的两种方法

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

2023-09-21 05:45:05 151

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

方法一

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


*{
margin:0;
padding:0;
}
input{
border:none;
}
.box{
height:50px;
background:yellow;
}
.boxinput{
width:200px;
height:30px;
border-radius:15px;
margin:10px0;
background:url(image/search.gif)no-repeat;
background-color:white;
background-position:3px;
padding-left:30px;
border:1pxsolidblack;
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;
}

总结

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐