Albert Albert - 7 months ago 15
HTML Question

Text Input has 1 pixel difference on my iPhone

I have this irritating problem with one of my sign in and signup forms. The forms input on my mobile are 1px longer and i'm not exactly sure why

Desktop Desktop VS Mobile Mobile

I know one is sign in and sign up but that's irrelevant so don't worry about the difference its the same on both forms

Here is my code for my LESS

@inputradius: 4px;

input{
&[type=text], &[type=email], &[type=password]{

font-size: 14px;
padding: 4.5px;
border: 1px solid #000;
border-radius: @inputradius;
&.noleft{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
}

.inputimg{
border-top-left-radius: @inputradius;
border-bottom-left-radius: @inputradius;
padding: 4px;
top: 10px;
position: relative;
border: 1px solid #000;
border-right: none;
}


And my html for that bit

<div class="control">
<img class='inputimg' src="images/inputs/username.png"><input placeholder="Username" class="noleft" type="text" name="username" value="{{ Request::old('username') }}"/>
</div>
<div class="control">
<img class="inputimg" src="images/inputs/email.png"><input placeholder="Email" class="noleft" type="email" name="email" value="{{ Request::old('email') }}"/>
</div>
<div class="control">
<img class="inputimg" src="images/inputs/password.png"><input placeholder="Password" class="noleft" type="password" name="password"/ value="{{ Request::old('password') }}">
</div>


Even code pen appears differently
http://codepen.io/albermashy/pen/LNaEEG

Answer

Add this to the input field, and it should be fine:

height:30px;
box-sizing:border-box;

When you add a border to objects, the border is normally added outside of the box's content, thus leaving it with an actual height of 22 pixels, instead of 20. When uses border-box the border is added within the height parameters of the container.

Your image is an actual height of 30 aswell due to this mathematical ecuation:

Height 20px + 4px padding bottom + 4px padding top + 1px border top + 1px border bottom.

EDIT:

If floating your elements is no problem with the rest of your setup, you can add box-sizing:border-box to both the image and the input, and left float them. This will take care of the offset problem between the two, and you wont have to use the top:10px; Total css:

@inputradius: 4px;

input{
  &[type=text], &[type=email], &[type=password]{
    font-size: 14px;
    padding: 4.5px;
    border: 1px solid #000;
    border-radius: @inputradius;
    height: 30px;
    box-sizing:border-box;
    float:left;
    &.noleft{
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}
.control {
  clear:both;
  padding:20px 0;
}
.inputimg{
  border-top-left-radius: @inputradius;
  border-bottom-left-radius: @inputradius;

  position: relative;
  border: 1px solid #000;
  border-right: none;
  height: 30px;
  box-sizing:border-box;
  float:left;
}