CODEWITHSUNDEEP
javascripthtmlcssfirefox
Bandarbola855
Bandarbola855

Reputation: 127

Search box is taller in Firefox despite CSS being the same

I just found a issue in Firefox where an input element with the type search is displayed differently with same css style. Here's the code.

<input style="height:29px;" type="search">
<input style="height:29px;" type="submit" value="search">

on Webkit browsers like Chrome, Safari and Opera there is not an issue, but on Firefox of the latest version it acts differently. The search box is taller. How to fix this with CSS or JavaScript?

Upvotes: 0

Views: 43

Answers (1)

Dipak G.
Dipak G.

Reputation: 725

Could you try to add following element into CSS ?

CSS

input::-moz-focus-inner {
    height:29px;
    border: 0; 
    padding: 0; 
    margin-top:-2px; 
    margin-bottom: -2px;
}

HTML

<input type="search">
<input type="submit" value="search">

jsfiddle : http://jsfiddle.net/w2mmX/1/

it should solve this issue.

Upvotes: 1

Related Questions