Andre Chenier Andre Chenier - 6 months ago 18
CSS Question

search form ugly alignment if font-sizes of type=text and type=submit are different

what I want is:


  • text type and submit type inputs will be side by side with same
    height

  • font-sizes will be different (submit's font-size 12, other's will be
    16px.)

  • text will aligned vertically middle in both inputs



I tried several combinations with
height
,
line-height
also in below CSS however I couldn't achieve.

how can I achieve my requirements with CSS?



.input, .submit{margin:0;padding:0;border:1px solid #000;}
.submit{font-size:12px;}
.input{font-size:16px;}

<form action="#" method="post">
<input class="input" type="text" name="search"><input class="submit" type="submit" value="SEARCH">
</form>







Answer

add height, box-sizing and vertical-align together

.input, .submit
{
  margin:0;
  padding:0;
  border:1px solid #000;
  /*added*/
  height:25px;
  box-sizing:border-box;
  vertical-align:middle;
}
.submit{font-size:12px;}
.input{font-size:16px;}
<form action="#" method="post">
<input class="input" type="text" name="search">
<input class="submit" type="submit" value="SEARCH">
</form>