由于<input type="file" />太丑，通常的解决方案是，让file类型的元素透明度为0，覆盖在我们漂亮的按钮上。然后我们去点击好看的按钮，实际上点击的是file元素。

  然而，此方法有很多的不足：

  1、尺寸控制不灵活。CSS width属性有些浏览器不管用，需要使用size，然后高度控制也不精准，我们很难正好覆盖在好看的自定义按钮上。

  2、样式不好控制，按钮的hover态以及active态不好处理。

  3、HTML结构限制以及定位成本。

  更好的办法是，使用label元素与file控件关联。

  <label class="ui_button ui_button_primary" for="xFile">上传文件</label>
  <form>
     <input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);">
  </form>

  这样就解决了以上问题。


  本文出自张鑫旭博客：http://www.zhangxinxu.com/wordpress/2015/11/html-input-type-file/