How to customize html message <input type=“file”>?

Question

I am trying to customize the message of my input type file that already looks like this:

i need to vertical align middle that "not file chosen" and change the text of both "choose file" and "no file chosen"

Answer 1

you can customize like this:

<style type="text/css">
#upload-file-container input {
   filter: alpha(opacity=0);
   opacity: 0;   
}
</style>

<br />
<label>Please click the Image to Upload a file:</label>
<div id="upload-file-container">
<input type="file" name="photo" />
</div>