$(function() { $.fn.extend({ filestyle: function(a) { var c = { inputWidth: 150, inputHeight: 18, inputClass: null, buttonBgImage: null, buttonBgColor: null, buttonBgRepeat: "no-repeat", buttonBgPosition: "left center", buttonWidth: 50, buttonHeight: 18, buttonText: "Browse" }; var a = $.extend(c, a); var b = c.inputWidth + c.buttonWidth + 10; $(this).wrap('<div class="file-wrap" />').css({ opacity: 0, "z-index": 9999, position: "absolute", right: 0, top: 0, height: c.inputHeight, padding: 0, margin: 0 }); $(".file-wrap").append('<input type="text" class="file-fake ' + c.inputClass + '" /><div class="button-fake">' + c.buttonText + "</div>").css({ position: "relative", height: c.inputHeight, width: b }); $(".button-fake").css({ position: "absolute", top: 0, right: 0, "line-height": c.buttonHeight + "px", "background-color": c.buttonBgColor, "background-image": 'none'/*"url(" + c.buttonBgImage + ")"*/, "background-repeat": c.buttonBgRepeat, "background-position": c.buttonBgPosition, height: c.buttonHeight, width: c.buttonWidth }); $(".file-fake").css({ position: "absolute", top: 0, left: 0, "z-index": 1, width: c.inputWidth }); $(this).each(function() { $(this).bind("change", function() { var d = $(this).val(); $(this).next("input").val(d) }) }) } }) });