After testing in Chrome and Firefox, I noticed that the input box appears larger than expected in Firefox.
Below is the HTML markup:
<div class="form-wrapper">
<input type="search" name="Ofsearch"
placeholder="Search here..." value=""/>
<button id="searchButton" type="submit">
Search
</button>
</div>
And here is the corresponding CSS:
.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;
}
For a visual representation, you can view the example here.
Upon investigating, I discovered that the padding:20px in .form-wrapper input{ } is causing the discrepancies in size between Chrome and Firefox. Removing it fixes the issue in Firefox but results in a smaller input area in Chrome. Is there a way to ensure consistency across both browsers with regards to the display?