JSFiddle - React, Tailwind, and code Playground

HTML

<span id="uploadMask"><input type="file" multiple="multiple" name="file" id="file_upload"><span class="button">Select Documents</span></span>

CSS

* {cursor:pointer !Important}

#uploadMask {
    width:160px;
    display: block;
    float:left;
    overflow: hidden;
    height:32px;
    margin-right: 5px;
    position: relative;
}

#uploadMask input {
    position: absolute;
    top:0;
    bottom: 0;
    right:0;
    opacity: .4;background:Red;
    z-index: 2;
    cursor: pointer;
}


#uploadMask .button {
    background:#ccc;
    line-height:24px;
    padding:5px 15px;
    display:block;
}