CODEWITHSUNDEEP
csshtml
John John
John John

Reputation: 1

How to force the Search text field and search button to have exactly the same height

I have the following html inside my asp.net mvc web application:-

<form class="customSearch"method="GET" action="@Url.Action("Search", "Home")">

<input  class="searchInput  push-up-button" placeholder="Search by tag.." name="searchTerm2" data-autocomplete-source= "@Url.Action("AutoComplete", "Home")" type="text"/><input type="submit" value="Search" class="btn"/>
                            </form>

The result will be as follow,

enter image description here

where the search button and the text field have different height. So how I can force both elements to be on the same horizontal alignment ?

Thanks

Upvotes: 0

Views: 93

Answers (1)

DaniP
DaniP

Reputation: 38252

First at all reset all values for both input :

input {
   margin:0;
   padding:0;
   border:0;
}

Then set an equal height , line-height , vertical-align and box-sizing:

input {
  height:30px;
  line-height:30px;
  vertical-align:middle;
  box-sizing:border-box;
}

After that you can personalize each one with lateral padding and color for background and text.

The demo http://jsfiddle.net/3TeHT/6/

Upvotes: 1

Related Questions