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

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>
</div>

Code (markup):

Any help will be greatly appreciated.

 

If you are using bootstrap, something like this would work: http://jsfiddle.net/geniuscarrier/ccsGK/

If not, here is another example: http://jsfiddle.net/rUdf2/6/

There are a ton of examples you can look online, just google "css choose file button".

 

I would have a look at the CSS-file connected to that button. And, besides, why in the world is there an image for this... a simple CSS-button with text on it should do just fine.

 

I'd like to try "a simple CSS-button with text on it", can you give me a code example, please?

 

https://www.google.com/search?q=css...la:en-US:official&client=firefox-a&channel=sb

 

Thanks for the links. Yes, I know how to create a button, I just don't know how to add it to the code:

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

HTML:

Any additional help will be appreciated.

 

I'm not going to provide code here but I will explain to you how I did it.

I placed an image of the upload button I wanted next to the upload button and then in jquery I hid the original button and when the image is clicked on, you trigger the hidden button.

I could provide you with example if you haven't understood what I meant

 

Hi, thanks for your reply. I'm trying to replace the "Choose File" button, not an upload button.
Any code help would be appreciated.

 

The problem is that "Choose file" is one of the elements in form controls you have almost no control over, apart from what @shemseddine mentioned - ie, use another element which you have full control over, and when you click on that, just trigger the normal event from the <input type="file">-button.

 

Yeah sorry, I misspelled that. meant to say the choose file button

 

Thanks for your replies.
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>

HTML:

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>

HTML:

As you can see I have an image (image2) button 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

 

The solution is to keep a non-visible file input for functionality while using some other visible element, such as a div or image, as the interface element. Relaying the click from the div to the input is easy.

 

It's easy, find the text "No file chosen" and erase it.

 

Are you stupid? Or just don't know what you're talking about? The "No file chosen" is part of the input type="file", automatically rendered by the browser. It's not possible to "find the text and remove it". It is, however, possible to hide the original element entirely.

 

hey, talk nice please. i said it wrong. you can put whatever the hell you want there, or no text at all, use something like this <input type="file" title="">, or the equivalent that works on any browser.

 

Okay... when you have no clue, you really shouldn't speak, at all. It _DOESN'T MATTER_ if you put in an empty value, an empty title, or whatever else you wanna throw at it. The browser renders an input type="file" however it choses, including displaying the "no file chosen" (Chrome) or "no file selected" (Firefox) - the only browser that doesn't show any text (but on the other hand, an empty input box), is IE.

 

http://jsfiddle.net/ZDgRG/280/ . what do you say now?

 

Uhm... and that has got what to do with your first statement? Or your second, for that matter? It's basically just what we've told him to do already, albeit in a worse form - onchange-property on the input-element, for one.
Although, yes, you do have one point, the fact that if you make the width of the file-input box as small as possible, you won't see the text. You will, of course, have to use js or something similar to actually show the filename when it is selected.