改变input type file的默认样式

话说<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>

css

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