Help with changing default "Choose File" button image in Upload Form

Get Started
1

I’d like to replace the default “Choose File” button with an image of my own.
Here is the code, I believe, and an image of it currently:

<div class='controls'>
<input id="file" type="file" name="file" />
<?php //echo form_error('file');   ?></div>

Any help will be greatly appreciated

2

Not made easy by most browsers, apparently, and not a PHP thing at all. Have a look here: http://stackoverflow.com/questions/572768/styling-an-input-type-file-button/9546968#9546968

3

Thanks for your reply. It was helpful, but a lot is beyond my skill level.
However, now I’ve gotten this far, any additional help will be appreciated:

Original code (see image1):

<div class='controls'>
<input id="file" type="file" name="file" />
<?php //echo form_error('file');   ?> <br /><br /></div>
</div>

My new code(see image2):

<div class='controls'>
<div id="File button">
<div style="position:absolute;">
<label for="fileButton"><img src="../images/ChooseF.png"></label></div>
<input id="fileButton" type="file" name="file" />
<?php //echo form_error('file');   ?> <br /><br /></div>
</div></div>

As you can see I have an image button (image2) that works successfully, but the “No file chosen” is under the image, as you can now see only “osen”.
Can anyone somehow help me move “no file chosen” out to the right of the image button?
Thanks