在文本框上浮动图标而不使用绝对位置

Question

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

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

Answer 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/