HTML how to remove text in FileUpload field?

Question

When I have a file upload field,

<form action="" method="post" enctype="multipart/form-data">
    <input id="image" type="file" name="image">
</form>

http://jsfiddle.net/jakeaustin5574/6DzgU/

It automatically creates a text "No file chosen" and a "Browse" button.

I want to change or remove this "No file chosen" text.

Is there anyway to achieve this in css or Javascript?

Thanks

Answer 1

First of all. You have to hide your input:

input#image{position:fixed;top:-100px;}

Secondly, you have to create alternative button with your skin:

<form action="" method="post" enctype="multipart/form-data">
   <input id="image" type="file" name="image">
   <button id="image_alt">Select image</button>
</form>

and the last step is to create a javascript script which link alternative button with original one:

document.getElementById('image_alt').addEventListener('click',function(){
    document.getElementById('image').click();
});

Example Fiddle