Input输入框中加入小图标

最新推荐文章于 2025-08-10 11:44:57 发布

原创最新推荐文章于 2025-08-10 11:44:57 发布 · 3.4w 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文介绍了一种在网页表单的输入框内嵌入小图标的方法，通过将图标作为背景图片并调整填充来实现视觉上的整合，适用于需要美化表单界面的设计需求。

今天遇到一个问题，怎么在Input输入框中加入小图标，实现效果如下：

解决方法是把图标当初背景图片，然后使用padding使得输入的内容向右移动，这样图标就显示出来了

代码如下：

.login .login_form .login_username{background:url(../images/login_yonghu.png) no-repeat 0 0;background-position: 15px 10px; height:40px;width:286px;padding-left:49px;padding-top:10px;padding-bottom:10px;line-height:20px}
.login .login_form .login_password{background:url(../images/login_mima.png) no-repeat 0 0;background-position: 15px 10px; height:40px;width:286px;padding-left:49px;padding-top:10px;padding-bottom:10px;line-height:20px}