Correcting formatting of <input type="file"> in Chrome

StackOverflow https://stackoverflow.com/questions/20825657

Question

The markup is a simple <input type="file" class="uploadImageInput"></input>

Please help me vertically center the "No file chosen" text. I have tried all that I could, vertical-align etc. See screenshot below:

Rendering on Chrome (bad)

Btw, Firefox seems to render the desired result as shown below. Need help for Chrome please. It would be such a shame to go through the route suggested by quirksmode (http://www.quirksmode.org/dom/inputfile.html), as my requirement is very basic. Thanks.

Rendering on Firefox (good) EDIT/UPDATE: Turns out that the problem was with the line-height:1.625 declaration in <body> which got inherited to this input. Forcing line-height:1 for this input solved it. But is strange that Chrome and Firefox deal with this so differently.

No correct solution

OTHER TIPS

I think you should look at this link: http://coding.smashingmagazine.com/2013/02/27/css-form-elements-problem/ especialy the paragraph about file input and the selector I did not knew before: input[type="file"]::-webkit-file-upload-button

This link refers to an older article: http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/ (sligtly outdated, but gives a good idea of the differences between browsers)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top