input添加小图标【百科全说】

如何对input文本框添加上小图标？思路：对input文本框设置一个不重复的背景如图片，然后使用background-position设置背景图片的位置。来看看input输入框如何添加小图标吧。

操作方法

01

新建一个html文件。如图
02

在<body>标签中输入一个<div>标签，然后在<div>标签中输入<i>和<input type="text">标签。代码： <div class="div-bor"> <i class="icon-user"></i> <input type="text" class="user" /> </div> 如图：
03

找到<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> 如图：
04

使用浏览器查看效果。保存html文件后使用浏览器打开即可看到效果。如图：
05

添加左内边距。在文本框输入内容发现内容和小图标挤在一块了，为了解决这个问题只需要为文本框天加一个左内边距即可代码：
06

保存html文件后重新使用浏览器打开，再次输入内容发现已显示正常。
07

为了让输入框显示得更好看，把输入框的小图标再添加一个些样式。如图：
08

保存好html文件后使用浏览器查看效果。如图：
09

页面所有代码。如有不懂可把页面所有代码复制到新建的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>

input添加小图标

操作方法

相关推荐