JSFiddle - React, Tailwind, and code Playground

HTML

<div class='uploader'>
    <div class='btn'>選擇檔案</div>
    <input type='file' />
</div>

<span>點點看咩</span>

CSS

.uploader {
   position:relative;
   height:29px;
   
   display:inline-block;		/* 讓區塊大小由內容物決定 (.uploader .btn) */
   -webkit-user-select: none;
}

.uploader .btn {				/* 負責裝飾的假按鈕 */
   padding:6px 10px 6px 30px;	/* 撐開按紐 */
   border:1px solid #aaa; border-radius:1px;
   
   background:url(https://lh3.googleusercontent.com/-rotN0LlVd3M/UWD-38MngEI/AAAAAAAAAVA/oe0YEKOBim0/h120/icon-uploader.png) no-repeat 10px center  #f3f3f3;
   
   font-size:13px; font-weight:bold; color:#333;
   
   position:relative;
   z-index:1;					/* 實際 z 高度需要比 <input> 低 */
}

.uploader input[type='file'] {
   position:absolute;			/* 上下左右填滿整個 .uploader 部分 */
   top:0;	bottom:0;			/* 讓你想點不到都難 */
   left:0; right:0;
   
   opacity:0;					/* 透明度設為 0 就看不到了，IE 需用 filter */
   
   z-index:2;					/* 實際 z 高度需要比裝飾的高 */
}