Bordure de champ d'entrée HTML plus petit que div qui le contient

Question

Je suis aux prises avec un problème. Ma bordure de champ de saisie (lors de la frappe) est plus petite que le champ div (la bordure est aussi grande que l'espace réservé), comme vous pouvez le voir sur l'image ci-dessous.

le code CSS pour le champ d'entrée est le suivant:

.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; 
 
}

le code HTML pour le champ de saisie est celle-ci:

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

Je tournai la couleur du champ (quand je tape) dans la partie de style de mon élément html:

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

S'il vous plaît aidez-moi, je ne sais pas pourquoi la la frontière est si petite. Merci!

Modifier: Enfin résolu mon problème. Pour tout le monde qui se bat avec ce problème, il suffit de mettre le "padding" dans le style css d'entrée, au lieu du style div css. Mon problème était, que le champ blanc n'était pas le champ d'entrée, mais le champ div, donc mettez la valeur de remplissage dans votre style css d'entrée et la bordure apparaîtra autour du champ blanc :)

Answer 1

Ajouter propriété de hauteur et définir au besoin comme 30px

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