html - Html Data-Icon 与输入边距混淆

Question

我正在尝试将数据图标插入两个输入字段，但它们不断将我的输入字段向右移动，就像他们在其中添加一个边距一样。

我对图标使用 z-index:2 以使它们漂浮在字段上方并且它们确实如此，但添加的边距仍然存在。

这是我的CSS：

#loginBox input#username, #loginBox input#password {
    height: 20px;
    width: 120px;
    padding: 5px 5px 5px 32px;
    border: 1px solid rgb(178, 178, 178);
    box-sizing : content-box;
    border-radius: 3px;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    transition: all 0.2s linear;
}
#loginBox [data-icon]:before {
    content: attr(data-icon);
    font-family: FontomasCustomRegular;
    color: #999;
    position: relative;
    left: 25px;
    z-index: 2;
}

这是一个屏幕截图：

有什么想法吗？

谢谢。

Answer 1

Sanjeev 和 Stéphanie Walter 的代码几乎相同

http://www.infotuts.com/email-verification-php/

http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/

[data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontomasCustomRegular';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 35px;
    width: 30px;
}

位置：绝对；