css——选择文件上传按钮太丑解决方案

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

  然而，此方法有不少的不足：

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

  二、样式很差控制，按钮的hover态以及active态很差处理。

  三、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/