本文介绍了在网页开发中为input输入框添加小图标的两种常见方法。第一种利用CSS background属性将图标作为背景插入；第二种通过i标签结合绝对定位实现。文章提供了具体的代码示例，帮助开发者快速实现美观的搜索框效果。
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标签插入
方法二
第二种方法是使用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中添加小图标的两种方法，希望能对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复大家！