话说<input id="videoUrl" type="file" 的样式确实不怎么好看。
1.原input设置透明opacity:0;使用position:absolute,使层重叠
2.用#videoUrl_1显示在原input下作为底层,就像是设置背景
3.底层设置想要的样式
4.选择文件后的值显示在底层上οnchange="document.getElementById('videoUrl_1').value=this.value"
总之两层重叠,起作用的file层透明不可见,底层设置样式,可见。
html
<td><div><input id="videoUrl" type="file" name="videoUrl" οnchange="document.getElementById('videoUrl_1').value=this.value"></div>
<div><input id="videoUrl_1" type="text" value="选择视频"></div>
</td>
css
#videoUrl{opacity:0;position:absolute;}
#videoUrl_1{background-color:ccc;}