Getting rid of HTML file inputs once and far all They've always annoyed me, and as a matter of principle, would like to leave my HTML/CSS intact and have the various file upload plugins work with consistent behavior with any styled element.

The following script places a transparent file input over a selected input.  Note that solutions such as triggering an upload script based on another element being clicked are not supported by all browsers, so please do not recommend doing so. One deficiency of my current solution is that cursor pointer doesn't work with Chrome.  Another is that I have not addressed border radius on the new element, and will consider doing to in the future.  I am also sure there are other changes that should be made.  Please advise of recommended changes.

See https://jsfiddle.net/4noentrp/2/ for a working example.

PS.  I would think all file upload plugins should default to similar functionality.  Agree?

jQuery.fn.extend({
    makeInput: function (o) {
        var arr = [];
        this.each(function () {
            var $this = $(this);
            if ( $this.is( "input:file" ) ) {var elem=$this;}
            else {
                var position = $this.position();
                var elem = $('&lt;input/&gt;', $.extend({},o,{
                    type: 'file',
                    style: 'height: ' + $this.outerHeight() + 'px;width: ' + $this.outerWidth() + 'px;top: ' + position.top + 'px;left:' + position.left + 'px;margin-top:' + $this.css('marginTop') + ';position:absolute;cursor:pointer;z-index:9999;opacity:0;filter: alpha(opacity=0)'
                    }
                )).insertAfter(this);
            }
            arr.push(elem[0]);
        });
        return $(arr);
    }
});

$('.makeInput').makeInput({name:'bla'}).fileupload({
    add: function (e, data) {
        alert(data.originalFiles[0].name+' submitted');
    }
});


Related HTML and CSS is shown below, however, the primary script is the JavaScript located above.

&lt;div class="box"&gt;
    &lt;div&gt;bla bla bla&lt;a href="javascript:void(0)" class="makeInput"&gt;inline&lt;/a&gt;bla bla bla&lt;/div&gt;
    &lt;p class="makeInput"&gt;block&lt;/p&gt;
    &lt;p class="makeInput" id="float"&gt;float&lt;/p&gt;
    &lt;p class="makeInput" id="position-static"&gt;position-static&lt;/p&gt;
    &lt;p class="makeInput" id="position-absolute"&gt;position-absolute&lt;/p&gt;
    &lt;p class="makeInput" id="position-relative"&gt;position-relative&lt;/p&gt;
&lt;/div&gt;

a {
    border: 1px solid black;
}
p {
    width: 120px;
    border: 1px solid black;
}
#float {
    float:right;
}
#position-absolute {
    position: relative;
    left: 30px;
    top: 80px;
}
#position-relative {
    position: relative;
    left: 30px;
    top: 80px;
}
#position-static {
    position: static;
}
I know my answer comes a bit late, but I thought I'll share. I don't really get the problem you're facing. What's wrong with doing the regular styling of label, as in my example?

Answering your questions:


  @CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Does it work for all browsers?


&lt;label&gt; was introduced in HTML4, even IE6+ can support it.


  My reason for creating this script is to allow the buttons on a jQueryUI dialog to work as file upload triggers (...)


Don't use JavaScript (and especially it's libraries) for elements and functionalities that you can create with pure (X)HTML and CSS. But if you have to do the file upload with a jQuery UI buttons or any other element and you don't want to create and style a &lt;label&gt;, you can simply do:

var fileInput = document.querySelector('input[type="file"]');

document.querySelector('input[type="button"]').onclick = function() {
  fileInput.click();
}
fileInput.onchange = function() {
  this.form.submit();
};


Where input[type="file"] bear display: none and input[type="button"] can be any element that we'd like to trigger file upload action. Take a peak into my working example.