input添加小图标
的有关信息介绍如下:如何对input文本框添加上小图标?思路:对input文本框设置一个不重复的背景如图片,然后使用background-position设置背景图片的位置。来看看input输入框如何添加小图标吧。
新建一个html文件。如图
在
标签中输入一个标签,然后在
标签中输入和标签。标签,在这个标签后面新建一个input添加小图标
代码:
如图:
找到
如图:
使用浏览器查看效果。保存html文件后使用浏览器打开即可看到效果。如图:
添加左内边距。在文本框输入内容发现内容和小图标挤在一块了,为了解决这个问题只需要为文本框天加一个左内边距即可
代码:
保存html文件后重新使用浏览器打开,再次输入内容发现已显示正常。
为了让输入框显示得更好看,把输入框的小图标再添加一个些样式。
如图:
保存好html文件后使用浏览器查看效果。如图:
页面所有代码。如有不懂可把页面所有代码复制到新建的html文件后即可看到效果。(注意:小编没有把小图标的图片上传,复制所有代码后需要把引入图片修改为本地的图片路径哦 【background-image: url(图片路径)】)
所有代码:
.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;
}