0

I am struggeling with a problem. My input field border (when typing) is smaller than the div field (the border is just as big as the placeholder), as you can see on the picture below. enter image description here

The css code for the input field is the following:

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

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

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

The html code for the input field is this one:

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

And I set the color for the field (when I am typing) in the style part of my html element:

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

Please help me, I don't know why the border is so small. Thank you!

Edit: Finally solved my problem. For everyone else who struggels with this problem, just put the "padding" into the input css style, instead of the div css style. My problem was, that the white field wasn't the input field, but the div field, so put the padding value into your input css style and the border will appear around the white field :)

Albert Klug
  • 23
  • 5

1 Answers1

0

Add height property and set it as required like 30px

.form_login_username input
{
border: none;
width: 100%; 
padding-left: 45;
box-sizing: border-box;
height: 30px;
}
Fatehi_Alqadasi
  • 548
  • 5
  • 14
  • This actually just changes the height of the white box. I wanted to change the size of the yellow border (the input field), so that it is as big as the white field. If you know how I could change the color of the white field's border or how I could change the size of the yellow border inside, I would really appreciate it. Thank you tho. – Albert Klug Aug 20 '17 at 20:15
  • Sorry add height:30px in the .form_login_username input class { border: none; width: 100%; padding-left: 45; box-sizing: border-box; } – Fatehi_Alqadasi Aug 20 '17 at 20:17
  • Not working, there is still a wide space between the yellow border and the white field's border. When I change the height of the input field, the size of the white field changes with it, so it makes no difference. thank you though. – Albert Klug Aug 20 '17 at 20:41
  • I try it and it's working fine. try it here https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide – Fatehi_Alqadasi Aug 20 '17 at 20:45