CODEWITHSUNDEEP
htmlcssfirefoxwebkit
Ian Storm Taylor
Ian Storm Taylor

Reputation: 8700

How can I remove the extra, and different pseudo-padding on text inputs in Webkit and Gecko?

The problem only happens on input[type="text"] in Webkit. No matter what I do, there is the equivalent of an extra padding: 1px 0 0 1px (top and left only) on the element.

A similar problem happens in Gecko, input[type="text"] has an equivalent extra padding: 1px 0 0 1px and input[type="button"] has an extra padding: 1px 0 0 0.

Here's a JSFiddle showing you everything I've tried, and nothing works: http://jsfiddle.net/PncMR/10/

Interestingly, when you set the line-height of all the elements to 0 ( http://jsfiddle.net/PncMR/11/ ), the only unaffected elements are the ones with the problems, so I'm assuming that the browser is defaulting to a specific line-height, and I'm now looking for a way to override it.

I've found nothing in the webkit base styles that would do this, but feel free to check yourself:

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

This is not a moz-focus-inner problem, or an appearance: none problem, or a box-sizing problem, or an outline problem and I can't find any other solutions.

Edit: See my answer below for the vertical padding problems, but I'm still looking for a solution to the extra padding-left: 1px equivalent on text-inputs only in webkit and gecko. ( http://jsfiddle.net/PncMR/14/ )

Upvotes: 11

Views: 2933

Answers (2)

Ian Storm Taylor
Ian Storm Taylor

Reputation: 8700

In Webkit

The extra vertical "padding" on input[type="text"] in Webkit is because you cannot give text inputs a line-height value of less than normal, which isn't a specific value, but varies depending on the typeface.

I know this is the cause, but I cannot find where the input would be getting this style, because it doesn't appear in the Webkit UA stylesheets.

In Gecko

The extra vertical "padding" on input[type="text"] and input[type="button"] in Gecko is due to user-agent stylesheet containing:

input {
    line-height: normal !important;
}

and !important declarations in the user-agent stylesheet cannot be overidden in any way.

Conclusion

You can't go under line-height: normal in Webkit, and you can't have anything other than line-height: normal on these elements in Gecko, so the best solution is to always style these elements with line-height: normal to get the best consistency, which isn't really a nice solution. Ideally, we'd be able to override all UA styles.

Neither of these account for the extra 1px of what acts like text-indent that only appears on input[type="text"] in both rendering engines.

People who care about this, should voice their opinions on these two Bugzilla threads:

Upvotes: 10

ThinkingStiff
ThinkingStiff

Reputation: 65351

The reason this is happening is because the browser is treating the content of the <input> as if it were an inline element, regardless of the display setting of the <input>. Inline elements have a minimum height as demonstrated here: http://jsfiddle.net/ThinkingStiff/zhReb/

You can override this behavior by making the "child" element inline-block. You can do this with the first-line pseudo-element.

input:first-line {
    display: inline-block;    
}

I go into more detail as to why this is in my answer to another question: https://stackoverflow.com/a/8964378/918414

This doesn't work in Firefox, but for another reason: Firefox's UA stylesheet (as outlined in @Ian's answer).

Upvotes: 4

Related Questions