CODEWITHSUNDEEP
cssgoogle-chromeinput-type-file
Kaya Toast
Kaya Toast

Reputation: 5503

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

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.

Upvotes: 2

Views: 4106

Answers (1)

Tomap
Tomap

Reputation: 620

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)

Upvotes: 4

Related Questions