JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<label for="fsel">
    <input type="file" id="fsel"><span>*</span>
</label>

CSS

label {
    display: block;
    width: 100px;
    height: 50px;
    background-color: red;
    text-align: center;
}
 
label span {
    font-size: 48px;
    font-weight: bold;
    line-height: 60px;
}
 
input[type="file"] {
    display: none;
}
.green {
	background-color: green;
}

JavaScript

document.getElementById('fsel').addEventListener('change', function() {
	this.parentElement.classList.toggle('green');
});