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