JSFiddle - React, Tailwind, and code Playground

by Rafael Boschini

HTML

<div id="div-input-file">
            
    <input name="file-original" type="file" size="30" id="file-original" onchange="document.getElementById('file-falso').value = this.value;"/>
    <div id="div-input-falso">
        <input name="file-falso" type="text" id="file-falso" /></div>
        <input type="button" id="triggerFile" value="UPLOAD"/>
    </div>

</div>

CSS

#div-input-file{
    height:28px;
    width:385px;
    margin:0px;
}
#div-input-file #file-original{
    opacity: 0.0;
    -moz-opacity: 0.0;
    filter: alpha(opacity=00);
    font-size:18px;
}
#div-input-falso{
    margin-top:-28px;
    display:inline;
}
#triggerFile{
    display:inline;
    min-height:28px;
    background-color:#F58220;
    border:0px;
    margin:0px;
    font-weight:normal;
    color:#fff;
}
#div-input-falso #file-falso{
    width:265px;
    height:22px;
    font-size:18px;
    font-family: Verdana;
}