input file 美化

        <input type='file'>的默认外观实在难看，绝大多数情况都需要对其美化。找了很多资料，目前发现以下方式是最简单的美化方式。

1.将file input用label包裹起来，然后给这个label增加我们想要的样式。

2.给input增加样式：

style="left:-9999px;position:absolute;"

3.label内增加显示文本

<span>上传文件</span>

完整代码：(点击查看demo)

<label class="upload_btn">
    <input type="file" id="" name="" style="left:-9999px;position:absolute;">
    <span>上传文件</span>
</label>

 

        貌似这是label标签的一个bug，但是兼容性极好。想要获取文件名，只需监听input的change事件即可。