JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<label for="upload-file">A proper input label</label>

<div class="upload-button">
    <div class="upload-cover">
         Upload text or whatevers
    </div>
    <input name="upload-file" type="file" />
</div>

CSS

/* first things first */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

label {
    /* just positioning */
    float: left; 
    margin-bottom: .5em;
}

.upload-button {
    /* key */
    position: relative;
    overflow: hidden;
    
    /* just positioning */
    float: left; 
    clear: left;
}

.upload-cover { /* basicall just style this however you want */
    background-color: gray;
    text-align: center;
    padding: .5em 1em;
    border-radius: 2em;
    border: 5px solid rgba(0,0,0,.1);
    
    cursor: pointer;
}

.upload-button input[type="file"] {
    display: block;
    position: absolute;
    top: 0; left: 0;
    margin-left: -75px; /* gets that button with no-pointer-cursor off to the left and out of the way */
    width: 200%; /* over compensates for the above - I would use calc or sass math if not here*/
    height: 100%;
    opacity: .2; /* left this here so you could see. Make it 0 */
    cursor: pointer;
    border: 1px solid red;
}

.upload-button:hover .upload-cover {
    background-color: #f06;
}













body {
    font-family: arial;
    padding: 3em;
}