Why the input box is showing so different on Ipad but not on chrome

Question

I am having a site which is working properly except for the input field and submit button next to it. They are not showing properly on iPad. The height of input box is slightly more than the submit button, making it look weird.

I what I personally think is iPad is safari-mobile, have different viewports(1024px) etc, but renders the same webkit appearance as of Chrome. Then why the input box is showing different on iPad?

---

Here is how it looks in Google Chrome on my desktop:

And here is how it looks on iPad:

The HTML part goes simply as:

<div id="search-form">
    <input id="Search" class="defaultText defaultTextActive" title="search shzamm!" type="text" spellcheck="false">
    <input onclick="javascript:someFunction();" type="button" value="Go" class="search_btn">
</div>

And the CSS for the same is:

#search-form {
    overflow: auto;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 26px;
}

input#Search {
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
}

.defaultText {
    width: 88%;
    padding-left: 4px;
    height: 29px;
    float: left;
    background-color: #f7f7f7;
    border-right: 0px solid #666;
    border-bottom: 1px solid #666;
    border-color: #999;
    margin-right: -33px;
}

.defaultTextActive {
    color: #999;
    font-style: italic;
    font-size: 15px;
    font-weight: normal;
}

.search_btn {
    font-size: 13px;
    font-weight: bold;
    height: 34px;
    cursor: pointer;
    float: right;
    margin: 0;
    width: 33px;
    background: url("../images/search.jpg") no-repeat;
    text-indent: -99999px;
    border: 1px solid #999;
    border-top: 2px solid #000;
    margin-top: 0px;
    margin-right: 1px;
}

As you can see, the border effects of input are also not being rendered properly in iPad. Anyone have any clue about it?

Answer 1

Try to use -webkit-appearance to get rid of the default styles.

Check this issue: iOS forces rounded corners and glare on inputs https://stackoverflow.com/a/14758383

Answer 2

This snippet of CSS will remove the default WebKit styling from your textboxes:

input[type="text"] {
    -webkit-appearance : none;
    border-radius      : 0;
}

Works on iOS 7 too.

Answer 3

Please use :

-webkit-appearance: none;