Input Field appearing different in Chrome and Firefox

Question

I've tested in Chrome, it shows fine but when in Firefox, the input box is larger than expected.

Here is the markup:

<div class="form-wrapper">           
    <input type="search" name="Ofsearch"
            placeholder="Search here..." value=""/> 
    <button id="searchButton" type="submit">
        Search
    </button>
</div>

Here is the style:

.form-wrapper {
     height: 80px;
     clear: both;
}

.form-wrapper input {
     border-radius: 10px;
     border: 5px solid #E5E4E2;
     margin: 2px;
     height: 40px;
     vertical-align: middle;
     padding: 20px;
     margin-top: 15px;
     width: 85%;
}

.form-wrapper button {
     overflow: visible;
     position: absolute;
     float: right;
     border: 0;
     padding: 0;
     height: 40px;
     width: 110px;
     border-radius: 0 3px 3px 0;
     margin: 20px -118px;
}

Here is the example in fiddle.

As you can see from the example, when in Chrome and Firefox, they show in different sizes.

When I check this issue, I found the padding:20px in .form-wrapper input{ } has caused this problem. However, when I delete it, Firefox shows fine, but the input area gets smaller in Chrome. Just wondering, any way to make it displayed the same in both browsers.

Answer 1

There is a difference because Firefox uses box-sizing: content-box on type="search" inputs, while Chrome uses border-box.

.form-wrapper input {
    box-sizing: border-box;
}

http://jsfiddle.net/J8dSN/12/