Apply JQueryUI for html element browse or input type=file

Jquery UI provides very best features that can be applied to html controls, one such feature is applying JQuery UI styling for buttons. Applying button style as such is very easy, but how can this be applied for a html element input(type=file). Now that looks little tricky. Ok first consider following html :

Now bind events

$(document).ready(function () {
        $('#btnBrowseAttachment').button();
        $('#btnBrowseAttachment2').button();

        $('#btnUpdateAttachment').button();

    });

So far we have added controls and have assigned JQuery UI buttons feature but we have too many controls. Apply following CSS styles

#btnBrowseAttachment2{
 position:absolute;
 /* start of transparency styles */
 opacity:0;
 -moz-opacity:0;
 filter:alpha(opacity:0);
 /* end of transparency styles */
 z-index:2; /* bring the real upload interactivity up front */
 width:270px;
}

Run the app and you should be able to see only one browse button (btnBrowseAttachment), ie.. btnBrowseAttachment2 button has been applied transparent style so that the click event binded to btnBrowseAttachment2 will fire when clicked btnBrowseAttachment.

For a list of all the ways technology has failed to improve the quality of life, please press three. ~Alice Kahn