Styling the upload button (input[type=file])

Styling the upload button (input[type=file])

  
Triggered by some other guide, here's a simple way to produce simple way to style the upload button, if you don't want any fancy stuff (like drop and drag etc.)

Styling the file-upload button is not straightforward.
Actually it's (almost) impossible without any tinkering.

attached is the oml to see it completely, but it comes down to this simple script and css.

The script just injects some containers and spans fot the look and feel.
also adds an event to the change, so the filename is being shown.

"<script>$('#" + InputFileId +"').wrap('<div><div id=""" + InputFileId +"_nb"" class=""CustomInputFile " + ButtonClass + """></div></div>');
$('<span>" + ButtonText +"</span>').insertBefore('#" + InputFileId +"');
$('<span id=""" + InputFileId +"_fn"">" + NoFileText +"</span>').insertAfter('#" + InputFileId +"_nb');
$('#" + InputFileId + "').change(function () {$('#" + InputFileId + "_fn').text(this.value);});
</script>"
the css is even easier:
it simply hides the input-button.

.CustomInputFile {
    position: relative;
    overflow: hidden;
    margin: 10px;
    cursor: pointer;
    vertical-align: middle;}
.CustomInputFile input[type="file"] {
    position: absolute;
    top: 0;right: 0;margin: 0;padding: 0;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);}
after this you can alter the style accodingly.
In my case I just inherit the Button class, so it will look teh same as other buttons of my theme.

Enjoy!
Thank you very much :D