JSFiddle - React, Tailwind, and code Playground

by Yuval Boss

HTML

<button id="fileInput">
    <label><strong>Browse</strong></label>
    <input id="inputField" type="file" value="Browse"/>
</button>

CSS

#fileInput{
    z-index: 9;
    width: 250px;
    height:40px;
    overflow: hidden;
    padding:0px;
    margin-left:10px;
    margin-top:0px;
}
#fileInput input{
    margin:0px;
    height:50px;
    opacity:0;
    z-index: 99;
    width:350px;
}
#fileInput label strong{
    z-index:100;
    font-size:30px;
}

JavaScript

$( "#fileInput" ).click(function() {
  $( "#inputField" ).trigger( "click" );
});