JSFiddle - React, Tailwind, and code Playground

HTML

<form action = "" method="post" >
         <div class = "button_wrapper">
               <div class = "fake_button">My text</div>
            
          <input type = "file" class = "button_is_wrapped">
        </div>
    </form>

CSS

body
{
padding:20px;
}
.button_wrapper{
position:relative;
width: 70px;
height: 24px;
display: block;
overflow: hidden;
z-index:1;
background:blue;
}
.fake_button {
position:absolute;
top:0;
left:0;
z-index:1;
}
.button_is_wrapped
{
position:absolute;
top:0;
left:0;
width:70px;
height: 24px;
line-height:24px;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
z-index:2;
}