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

ashutosh picture ashutosh · Oct 13, 2013 · Viewed 12.2k times · Source

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:

Desktop Version of input box

And here is how it looks on iPad:

Same input box 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

crmpicco picture crmpicco · Dec 3, 2013

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.