Hi,

I change the plugin to manage some weird cases with Firefox, and to manage the associated label:

$.fn.customFileInput = function(){
//apply events and styles for file input element
var fileInput = $(this)
.addClass('customfile-input') //add class for CSS
.css("top", "0px") // In Firefox, if we click on the associated label without having a hover on the input file, the display can be broken in some cases
.css("left", "0px")
.mouseover(function(){ upload.addClass('customfile-hover'); })
.mouseout(function(){ upload.removeClass('customfile-hover'); })
.focus(function(){
upload.addClass('customfile-focus');
fileInput.data('val', fileInput.val());
fileInput.trigger('click');
})
.blur(function(){
upload.removeClass('customfile-focus');
$(this).trigger('checkChange');
})
.bind('disable',function(){
fileInput.attr('disabled',true);
upload.addClass('customfile-disabled');
})
.bind('enable',function(){
fileInput.removeAttr('disabled');
upload.removeClass('customfile-disabled');
})
.bind('checkChange', function(){
if(fileInput.val() && fileInput.val() != fileInput.data('val')){
fileInput.trigger('change');
}
})
.bind('change',function(){
if($(this).val()){
//get file name
var fileName = $(this).val().split(//).pop();
//get file extension
var fileExt = 'customfile-ext-' + fileName.split('.').pop().toLowerCase();
//update the feedback
uploadFeedback
.text(fileName) //set feedback text to filename
.removeClass(uploadFeedback.data('fileExt') || '') //remove any existing file extension class
.addClass(fileExt) //add file extension class
.data('fileExt', fileExt) //store file extension for class removal on next change
.addClass('customfile-feedback-populated'); //add class to show populated state
//change text of button
uploadButton.text('Change');

        } else {
            // For the reset form case
            uploadFeedback
                .text("No file selected...")
                .attr("class", "customfile-feedback");
            uploadButton.text('Browse');
        }

    })
    .click(function(event){ //for IE and Opera, make sure change fires after choosing a file, using an async callback
        fileInput.data('val', fileInput.val());
        setTimeout(function(){
            fileInput.trigger('checkChange');
        },100);
    });

if(fileInput.attr("id")){
    // Manage properly the click on the associated label (in Firefox, we can have some problems)
    $("label[for='" + fileInput.attr("id") + "']").live("click", function(event){
        event.preventDefault();
        event.stopImmediatePropagation();
        event.stopPropagation();
        fileInput.trigger('click');
    });
}

//create custom control container
var upload = $('<div class="customfile"></div>');

//create custom control button
var uploadButton = $('<span class="customfile-button" aria-hidden="true">Browse</span>').appendTo(upload);

//create custom control feedback
var uploadFeedback = $('<span class="customfile-feedback" aria-hidden="true">No file selected...</span>').appendTo(upload);

//match disabled state
if(fileInput.is('[disabled]')){
    fileInput.trigger('disable');
}


//on mousemove, keep file input under the cursor to steal click
upload
    .mousemove(function(e){

// fileInput.css({
// 'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 20, //position right side 20px right of cursor X)
// 'top': e.pageY - upload.offset().top - $(window).scrollTop() - 3
// });

        fileInput.css({
            'left': e.pageX - upload.offset().left - fileInput.outerWidth() + 20, //position right side 20px right of cursor X)
            'top': e.pageY - upload.offset().top - 20
        }); 
    })
    .insertAfter(fileInput); //insert after the input

fileInput.appendTo(upload);

//return jQuery
return $(this);

};

Nice plugin, and it works perfectly but how about table or grid design like the one bellow.

The script will fail on this case. Any ideas on how we can design this?

<table style="display: inline-block;" class="mrQuestionTable" summary="Question text goes here lorem ipsum dolorem">
    <tbody>
        <tr>
            <td id="Cell.0.0"></td>
            <td style="text-Align: Center;vertical-align: Middle;" class="mrGridQuestionText" id="Cell.1.0"> <span style="" class="mrQuestionText">column 1</span>

            </td>
            <td style="text-Align: Center;vertical-align: Middle;" class="mrGridQuestionText" id="Cell.2.0"> <span style="" class="mrQuestionText">column 2</span>

            </td>
        </tr>
        <tr>
            <td style="text-Align: Left;vertical-align: Middle;" class="mrGridCategoryText" id="Cell.0.1"> <span style="" class="mrQuestionText">Category1_Text</span>

            </td>
            <td style="text-Align: Center;vertical-align: Middle;" id="Cell.1.1">
                <div></div>
                <input type="radio" value="__1" style="" class="mrSingle" id="_Q0_Q0_Q0_C0" name="_QQ3_Q__1_Qq3a_C">
            </td>
            <td style="text-Align: Center;vertical-align: Middle;" id="Cell.2.1">
                <div></div>
                <input type="radio" value="__2" style="" class="mrSingle" id="_Q0_Q0_Q0_C1" name="_QQ3_Q__1_Qq3a_C">
            </td>
        </tr>
        <tr>
            <td style="text-Align: Left;vertical-align: Middle;" class="mrGridCategoryText" id="Cell.0.2"> <span style="" class="mrQuestionText">Category2_Text</span>

            </td>
            <td style="text-Align: Center;vertical-align: Middle;" id="Cell.1.2">
                <div></div>
                <input type="radio" value="__1" style="" class="mrSingle" id="_Q0_Q1_Q0_C0" name="_QQ3_Q__2_Qq3a_C">
            </td>
            <td style="text-Align: Center;vertical-align: Middle;" id="Cell.2.2">
                <div></div>
                <input type="radio" value="__2" style="" class="mrSingle" id="_Q0_Q1_Q0_C1" name="_QQ3_Q__2_Qq3a_C">
            </td>
        </tr>
    </tbody>
</table>

Could you provide the PSD files for the check boxes? I need to make them transparent.