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/