JSFiddle - React, Tailwind, and code Playground

Spoofed file upload button

by Jennifer Perrin

HTML

<div class="file-upload">
    <span class="btn">Upload</span>
    <input type="file" class="file-upload__input" />
</div>

CSS

.btn {
    display: inline-block;
    padding: 1em;
    color: white;
    background: #09f;
    text-decoration: none;
    font: 0.75em/1.5 sans-serif;
    cursor: pointer;
}

.btn:hover,
.file-upload:hover > .btn {
    background: #BADA55;
}







.file-upload {
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    .file-upload__input {
        position: absolute;
        top:    0;
        right:  0;
        bottom: 0;
        left:   0;
        opacity: 0;
        cursor: pointer;
    }