How to vertically align a file name when entering a file in Chrome

Question

We have an input file on our website that is not as high as in the demo (see below, I exaggerated it to show the problem better), but we can’t get the file name in the center vertically - only the button with the centers in the vertical. Usually this is not a problem, since we usually adhere to the default style, but in this case the client wants to get a border at this input, so that the right border is aligned upwards with a few right-aligned buttons. The height in our case is 23px (the same for the height of the line).

See http://jsfiddle.net/UK72P/ for a demo. As far as I know, this only happens in Chrome and possibly in IE9 / 8 (it will be confirmed in the near future). Code in jsfiddle:

HTML

<input type="file">​ 

CSS

 input { display: inline-block; height: 40px; line-height: 40px; border: 1px solid #999; } 

Is there any property that I don’t know about, or is it just not possible?

Thanks in advance Richard

Answer 1

 input[type="file"] { line-height: 10px; } 

This worked for me, Chrome 29.0.1547.57

Answer 2

The problem seems to be a bug in Chrome, because it moves the button at the bottom of the line-height, but nothing moves the generated text. The solution is to set the height using a field and use a closed div if you want a border.

HTML

 <div class="file-border"> <input type=file> </div> 

CSS

 .file-border { border: 1px solid #999; } input { margin: 10px 0; } 

Implemented in this fiddle

Answer 3

Another solution works simply because the line height is quite small, so it makes sense to use a line height of 0.

This one will still have a non-zero height, it just removes the "padding" - for me, the fields and padding on the file input were 0 by default.

 input[type="file"] { line-height: 0; } 

Answer 4

This is a problem with the browser. Check out the fix here: http://www.quirksmode.org/dom/inputfile.html

Answer 5

Use Chrome Hack

 input{-bracket-:hack[;line-height:50px;];} 

But this did not fully comply with our requirement. Therefore, for this purpose I am making this violin.

http://jsfiddle.net/hassaan39/hTezL/3/

Answer 6

You can vertically align the input file field using the input file button:

 input[type="file"]::-webkit-file-upload-button { vertical-align: middle; height: 100%; }