Line-height in input fields
So the other day I was trying to get text input fields to have the same height across browsers. I figured I could use the line-height property for this, but no such luck. Well, it does work in WebKit browsers, but not in Firefox.
When looking closer at why I discovered that Firefox specifies line-height for form controls in its user agent stylesheet using the !important keyword, like this:
input {
/* Other statements removed for brevity */
line-height: normal !important;
}To take a look at the default CSS that Firefox uses, navigate to resource://gre-resources/. There are a few CSS files listed, but the input rule is in “forms.css”.
The problem is !important, which makes it impossible to override this rule from an author stylesheet, not even if you use !important. This has been discussed for years in the CSS Property 'line-height' has no effects on input text fields bug. It currently doesn’t look like a fix is coming any time soon.
Firefox is not the only browser to prevent you from changing the line-height of text inputs though – it seems Opera does too. So using line-height is ruled out.
The closest workaround I’ve been able to find is to explicitly set line-height for the browsers that let you to a reasonable guesstimate of “normal”. I say guesstimate because line-height:normal is more like line-height: abnormal. I found 1.2 to be close enough.
After that, I set the height of the input element to 1.2em to match the line-height. The final, and somewhat unfortunate, thing I had to do was to explicitly specify padding and border to make them consistent across browsers. This has the side-effect of removing any nice shadows and border styling from text inputs. You could get some of that back by experimenting with inset box-shadows.
Anyway, the resulting CSS looks like this:
input[type="text"] {
height:1.2em;
padding:2px;
border:1px solid #ddd;
font:1em/1.2 "Helvetica neue", Arial, sans-serif;
}There are some small differences in text rendering, but at least the inputs are the same height in most browsers. Know of a smarter or better way of doing this? Please let me know by email or on Twitter.