Height not being applied to search box without border - html

Question

I have an input of type search that I am trying to resize the height of. The height is never actually reflected unless I apply a border to the element. I have tried using line-height, font-size, min-height,max-height, and the height attribute on the element itself, nothing seems to work. Is there any way to resize the search box without applying a border?
#search{
display:block;
width:90%;
margin:10px auto 0;
height:50px;
}
#searchborder{
display:block;
width:90%;
margin:10px auto 0;
height:50px;
border:1px solid black;
}
<input id="search" type="search">
<input id="searchborder" type="search">
Update
So after checking on a Windows Machine it seems like the search input is rendering properly, for reference here is what I'm seeing on my Mac.
Any way to make this render properly on OSX?

Answer 1

Much of the time these two CSS/HTML snippets alone function the exact same and have height applied. The only difference is you can see the border on the #searchborder input.
However, search inputs can be rendered differently in different OS and Browsers. Webkit can be tricky with OSX. See the following article about styling CSS search inputs:
https://css-tricks.com/webkit-html5-search-inputs/
A suggestion at the bottom of that page would be to remove the webkit appearance by adding a CSS line and then the height will be applied:
#search{
-webkit-appearance: none;
display:block;
width:90%;
margin:10px auto 0;
height:50px;}