HTML入力フィールドの境界がdivを含むdivより小さい

Question

問題を抱えて苦戦しています。入力フィールドの境界線（入力時）はdivフィールドよりも小さくなります（境界線はプレースホルダと同じ大きさです）。

.form_login_username 
 
{ 
 
\t position: relative; 
 
\t width: 100%; 
 
\t background-color: white; 
 
\t border-radius: 5px; 
 
\t border: 1.2px solid #4d4d4d; 
 
\t padding: 12px 20px; 
 
\t margin-bottom: 15px; 
 
} 
 

 
.form_login_username img 
 
{ 
 
\t position: absolute; 
 
\t top: 1px; 
 
\t left: 5px; 
 
} 
 

 
.form_login_username input 
 
{ 
 
\t border: none; 
 
\t width: 100%; 
 
\t padding-left: 45; 
 
\t box-sizing: border-box; 
 
}

入力フィールドのHTMLコードはこの1つである：

<div 
 
    class = "form_login_username"> 
 
    <img 
 
    src = "User_Icon.png" 
 
    width = "40" /> 
 
    <input 
 
    type = "text" 
 
    name = "username" 
 
    placeholder = "Enter your username" 
 
    required /> \t \t \t 
 
</div>

入力フィールドのCSSコードは、以下であります

そして私は私のhtml要素のスタイルの一部のフィールド（Iが入力しています）の色を設定します。

input:focus 
 
{ 
 
    border: none; 
 
    outline: 1.2px solid #feb434; 
 
}

私を助けてください、なぜ、私は知りません国境はとても小さいです。 ありがとうございました！

編集：最後に私の問題を解決しました。この問題を抱えている人は、div CSSスタイルではなく、入力CSSスタイルに「パディング」を入れてください。私の問題は、白いフィールドは入力フィールドではなくdivフィールドなので、パディング値を入力CSSスタイルに入れて、白いフィールドの周りに境界線が表示されるようにしました:)

Answer 1

heightプロパティを追加し、必要に応じて30px

.form_login_username input 
{ 
border: none; 
width: 100%; 
padding-left: 45; 
box-sizing: border-box; 
height: 30px; 
}