JSFiddle - React, Tailwind, and code Playground

by Stephen Irving

HTML

<div class="file-input-wrapper">
  <button class="btn-file-input">Mah Custom Uploadz Button</button>
  <input type="file" name="file" />
</div>

CSS

.file-input-wrapper {
    width: 200px;
    height: 40px;
    overflow: hidden;
    position: relative;
}
.file-input-wrapper > input[type="file"] {
    font-size: 200px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}
.file-input-wrapper > .btn-file-input {
    display: inline-block;
    width: 200px;
    height: 40px;
}
.file-input-wrapper:hover > .btn-file-input {
    background-color: #aaa;
}