stylizeFileInput.js

jQuery.fn.extend({
  // options: width: integer, height: integer, image: string - absolute url path
  // example: $("input[type='file']").stylizeFileInput({width: 79, height: 22, image: '/images/file_button.gif'});
  stylizeFileInput: function(options) {
    return this.each(function(){
      var el = $(this);
      var div = $('<div>');
      div.css('width', options.width);
      div.css('height', options.height);
      div.css('background', 'url(' + options.image + ') 0 0 no-repeat');
      div.css('overflow', 'hidden');
      div.css('cursor', 'pointer');
      div.css('position', 'relative');
      el.wrap(div);
      el.css('position', 'relative');
      el.css('height', '100%');
      el.css('width', 'auto');
      el.css('cursor', 'pointer');
      el.css('opacity', 0);
      el.parent().mousemove(function(e) {
        var currentTarget = $(e.currentTarget);
        var file = $(currentTarget.children()[0]);
        var offset = currentTarget.offset();
        file.css('top', e.clientY - offset.top - (file.height() / 2));
        file.css('left', e.clientX - offset.left - (file.width() - 30));
      });
    });
  }
});