将图标浮动在文本框上而不使用绝对位置 [重复]

Posted 2023-03-15

【中文标题】将图标浮动在文本框上而不使用绝对位置 [重复]

【英文标题】：float a icon over a text box without using position absolute [duplicate]

【发布时间】：2014-08-28 19:49:46

【问题描述】：

我一直在互联网上寻找，但找不到任何解决方案。 它必须是可能的。 我有一个登录区。在文本框的开头有一个带有挂锁图标的文本框。 不，这可以使用position:absolute;，但是您必须处理浏览器定位差异。有没有办法在不使用position:absolute;的情况下将图标浮动在tex框上？

<div class="login_password_box">
    <i class="icon-lock"></i>
    <input type="password" id="login_password" value="" />
</div>

【参考方案1】：

您可以将图标设置为输入元素的背景。然后用背景位置定位它。

看看这个：Put icon inside input element in a form

---

#login_password 
    background: url('path/to/image.jpg') no-repeat;
    background-position: left center;

工作示例：http://jsfiddle.net/WZ7jj/

【讨论】：

应用左填充会使 c 更好

我使用的是“Font-Awesome”，但我想我会恢复到这个解决方案。谢谢卢克