input添加小图标
1、新建一个html文件。如图
2、在<body>标签中输入一个<div>标签，然后在<div>标签中输入<i>和<input type="text">标签。
代码：
<div class="div-bor">
<i class="icon-user"></i>
<input type="text" class="user" />
</div>
如图：
3、找到<title>标签，在这个标签后面新建一个<style>标签用于设置标签的类属性。
设置属性代码：
<style>
.div-bor{
position: relative;width: 200px;
}
.icon-user{
position: absolute;left: 0；z-index:5;
background-image: url(user.png); /*引入图片图片*/
background-repeat: no-repeat; /*设置图片不重复*/
background-position: 0px 0px; /*图片显示的位置*/
width: 20px; /*设置图片显示的宽*/
height: 20px; /*图片显示的高*/
}
</style>
如图：
4、使用浏览器查看效果。保存html文件后使用浏览器打开即可看到效果。如图：
5、添加左内边距。在文本框输入内容发现内容和小图标挤在一块了，为了解决这个问题只需要为文本框天加一个左内边距即可
代码：
6、保存html文件后重新使用浏览器打开，再次输入内容发现已显示正常。
7、为了让输入框显示得更好看，把输入框的小图标再添加一个些样式。
如图：
8、保存好html文件后使用浏览器查看效果。如图：
9、页面所有代码。如有不懂可把页面所有代码复制到新建的html文件后即可看到效果。（注意：小编没有把小图标的图片上传，复制所有代码后需要把引入图片修改为本地的图片路径哦 【background-image: url(图片路径)】）
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>input添加小图标</title>
<style>
.div-bor{
position: relative;width: 200px;
}
.icon-user{
position: absolute;left: 0；z-index:5;
background-image: url(user.png); /*引入图片图片*/
background-repeat: no-repeat; /*设置图片不重复*/
background-position: 0px 0px; /*图片显示的位置*/
width: 20px; /*设置图片显示的宽*/
height: 20px; /*图片显示的高*/
}
.user{
padding-left: 22px;
}
</style>
</head>
<body>
<div>
<i></i>
<input type="text" />
</div>
</body>
</html>