将图标放在表单中的输入元素中

Question

如何将图标放入表单的输入元素中？

现场版位于： Tidal Force 主题

原文由 akif 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您链接的网站使用了 CSS 技巧的组合来实现这一目标。首先，它为 <input> 元素使用背景图像。然后，为了将光标推到上方，它使用 padding-left 。

换句话说，他们有这两个 CSS 规则：

 background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

原文由 Dan Lew 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

其他人发布的 CSS 解决方案是实现这一目标的最佳方式。

如果这会给您带来任何问题（阅读 IE6），您还可以在 div 内使用无边框输入。

 <div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

不那么“干净”，但应该适用于较旧的浏览器。

原文由 harpo 发布，翻译遵循 CC BY-SA 2.5 许可协议