話說<input id="videoUrl" type="file" 的樣式確實不怎麼好看。

1.原input設定透明opacity:0;使用position：absolute，使層重疊

2.用#videoUrl_1顯示在原input下作為底層，就像是設定背景

3.底層設定想要的樣式

4.選擇檔案後的值顯示在底層上onchange="document.getElementById('videoUrl_1').value=this.value"

總之兩層重疊，起作用的file層透明不可見，底層設定樣式，可見。

html

<td><div><input id="videoUrl" type="file" name="videoUrl" onchange="document.getElementById('videoUrl_1').value=this.value"></div>
    <div><input id="videoUrl_1" type="text" value="選擇視訊"></div>
</td>

 

 #videoUrl{opacity:0;position:absolute;}
      #videoUrl_1{background-color:ccc;}