How to move "Choose file" to the right of "No file chosen" in with css

Question

I am wondering if there is a way to change the placement of "Choose File" and "No file chosen" so that the "No file chosen" area appears before "Choose File". I don't want to change any html, I only want to change the css.

<input type="file" id="upload" name="files[submission_1]" size="22" class="form-file" />

here to save time http://jsfiddle.net/x8wCu/

No. The browser determines how to display it. You can create your own in Chrome and Firefox that use a hidden file input. But it takes some hacky javascript and is not nice. — musefan, May 15 '13 at 13:52
@Emanegux - Except it's actually not that simple. If you read that whole question, you'll understand why. — Shauna, May 15 '13 at 14:58

score 2 · Answer 1 · answered May 15 '13 at 13:55

2

Unfortunately this is not possible because the browser decides how that is displayed.

However you can customise the way it looks by using a hack. You basically hide your file input by setting opacity to 0 and then putting a div on top of it.

Check this fiddle.

answered May 15 '13 at 13:55

MMM

7,221
2
24
42

Quite a fine hack there. This will help me a lot. – Emanegux May 15 '13 at 13:59
That's a strange url in the fiddle. O.o – DevOpsSauce Mar 28 '18 at 17:48

How to move "Choose file" to the right of "No file chosen" in with css

1 Answers1