CSS and html: how to style input file in css (aline the text with the choose file button)?

Question

enter image description here

Please see the image above. I have had this problem for a few times. The text never alines with the button. How can we change it so that they will aline?

The code is simply:

<td><label>Image/Avatar Upload</label></td>
<td><input type="file" name="avatar"></td>

and the css:

input {width: 350px; font-size: 20px; padding: 2px;}

Thanks!

I've seen something similar. It's to my understanding that each browser's file upload input is styled differently and is impossible to style yourself. similar post. — bashleigh
– bashleigh, Commented Dec 30, 2012 at 14:13
@tipsywacky the message 'no file chosen', how is it printed and where? Is it in the same cell or do you have any styling for it with CSS? — itsols
– itsols, Commented Dec 30, 2012 at 14:21
the no file chosen is the default message I believe. It is the same cell. You can see the css that I just added. — tipsywacky
– tipsywacky, Commented Dec 30, 2012 at 14:27
@itsols That's how Chrome renders file inputs (maybe Safari, too). — cimmanon
– cimmanon, Commented Dec 30, 2012 at 14:35

cimmanon · Accepted Answer · 2012-12-30 14:44:41Z

2

The short answer is: don't bother trying to style file inputs

The long answer: Completely controlling the styling file inputs have eluded us for years. They have components that fall under what's called Shadow DOM. We can see them, but we can't really touch them. The newer input elements (date, time, color, etc.) have the same "problem".

It should be noted that not every browser styles file inputs the same way. If you really really want to control this element, you have to replace it (google: "replace file input with image"). If you do this, the user will lose the ability to see exactly which file is being uploaded when they're not interacting with the file input element (due to security reasons, the filename will be accessible via JavaScript, but the path won't be).

answered Dec 30, 2012 at 14:44

cimmanon

68.6k17 gold badges169 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

syed mohsin · Accepted Answer · 2012-12-30 14:13:36Z

0

You should provide more detail because your provided code is working fine.

<td><label>Image/Avatar Upload</label></td>
<td><input type="file" name="avatar"></td>

see this FIDDLE

answered Dec 30, 2012 at 14:13

syed mohsin

2,9382 gold badges27 silver badges48 bronze badges

1 Comment

tipsywacky Over a year ago

my bad, I just added the css.

Collectives™ on Stack Overflow

CSS and html: how to style input file in css (aline the text with the choose file button)?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related