JSFiddle - React, Tailwind, and code Playground

by Joe Pigott

HTML

<span id='fileText'>Choose File<input type='file' id='file'></span>

CSS

body {
    background: #252525;
    color: #96f226
}
span {
    background: #4a4a4a;
    cursor: pointer;
    width: 20px;
}
span:hover {
    background: #656565;
}
input {
    opacity: 0;
    cursor: pointer;
    width: 20px;
}

JavaScript

$("#file").on("change", function()
{
    var value = this.value.split(/[\/\\]/).pop();
    $("#fileText").append(value);
});