JSFiddle - React, Tailwind, and code Playground

by cancerian73

HTML

<form action="" method="post">
<input type="file" name="upload" style="width:250px;"/>
</form>

CSS

input[type=file] {
    -webkit-appearance: textfield;
    position: relative;
    -webkit-box-sizing: border-box;
}
input[type=file]::-webkit-file-upload-button {
    width: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    border: none;
}
/* "x::-webkit-file-upload-button" forces the rules to only apply to browsers that support this pseudo-element */
 x::-webkit-file-upload-button, input[type=file]:after {
    content:'Browse...';
    display: inline-block;
    left: 100%;
    margin-left:3px;
    position: relative;
    -webkit-appearance: button;
    padding: 3px 8px 2px;
}