Overriding the default <input type="file" ... UI elements?

[Monkey_Revenge]

My issue is I hate how out of place inputs of type file look, its just ugly and rarely seems to meld well with other design elements. I am desperately trying to override how it looks to my custom needs and I have found a way to do it. But it is seriously a hack and while it works in chrome (my default browser) it doesn't work in Firefox.

Basically what I have is.

Javascript


function uploadCert() {
$("#file1").toggle();
document.getElementById("file1").click();
$("#file1").toggle();
}



Html


<a href="#" class="button" onClick='uploadCert();' >
<span> Upload custom SSL certificate </span>
</a>

<input type='file' id='file1' style="display:none;" >




Ill was going to position it off page if this works, and while this does work in Chrome it did not in at least Firefox (haven't tested others yet)

Basically is there an easier way of doing this? Does anyone know how to accomplish my goal here at all? Is it even possible?