how to make the file input field wrap?

Question

In a HTML form I have a file field like this:

<div class="filefield">
<input type="file" name="myfile" id="fileinput">
</div>

It displays a button and some text besides the button. When no file has been selected yet, the text is: No file chosen. If there is a file already selected, it displays the name of the file.

This text displays on the right side of the button. I want it to display below the button. I have tried numerous things in CSS, and nothing works, the No file chosen just always displays on the right side of the button, even if both the div and the input are given fixed widths only as wide as the button, and a fixed height high enough for a button and two lines of text, the text still displays on the right, outside of the div, and not below where the is space inside the div. How to make it wrap so the text displays below the button?

Answer 1

With @Guffa's answer showing that you can't mess with that field, you could create a hack around it.

What about a button element, that on click acts like a file browser button? And then a span element that holds the value of that file browser input? It would be some js hackery for sure, but could solve the problem.

EDIT

Working example: http://jsfiddle.net/nmeAW/1/

Edit 2

Even more better working example: http://jsfiddle.net/nmeAW/2/