html - 入力マージンをいじるHtml Data-Icon

Question

データ アイコンを 2 つの入力フィールドに挿入しようとしていますが、左マージンを追加する場合と同様に、入力フィールドが右にシフトし続けます。

アイコンをフィールドの上に浮かせておくために 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;
}

位置: 絶対;