Cant Open File Dialog With Button Inside Label

To hide (but retain the functionality) the ugly default input type file button for file dialog I used the following mechanism: HTML: <

Solution 1:

The Label represents a "caption" for an item in a user interface. The reason why your button isn't working is because a button isn't considered a valid "caption" for a "control" element because it is a "control" element. (see: https://developer.mozilla.org/nl/docs/Web/HTML/Element/label)

If you use an image or a piece of text inside the label it will work, because that will be considered a caption (this is why your first attempt worked). If you want to create a custom button you can use some text or an image tag otherwise you'll need some javascript.

Edit: maybe this page can be of help: http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/ The javascript they use shows the user what file (s)he has selected

Solution 2:

Just change the jQuery code and HTML tag will be as it is.

<labelfor="file-input"><buttonclass="upload_file"type="button">Upload file</button><!-- not working--></label><inputtype="file"id="file-input" />

Jquery Code:

jquery("[for=file-input] .upload_file").on("click", function(){
    jQuery("#file-input").trigger("click");
})