自定义文件上传按钮样式

自定义文件上传按钮样式

<input type="file">的默认样式是这个样子的：

Chrome浏览器：

IE浏览器：

用一个字来概括，那就是“丑”。

  虽然一直都觉得<input type="file">的默认样式不好看，但苦于不知道如何简单方便地自定义其样式，所以只能将就着用，偶然机会学习到了一种简单美化其样式的方法。废话不多说，直接看码。

美化文件上传按钮的方法：

1、label + clip

所需的关键知识点：<label>标签、clip属性

关于<label>标签：
1、<label>标签通过for属性与表单元素绑定在一起，当点击<label>标签中的文本时，会自动触发表单事件
2、绑定是通过<label>标签的for属性与表单元素的