自定義input file 2 整個圖片區域

技巧總結：

1. 內容區域和inputfile 相對定位；
2. 將inputfile設置爲透明

 

<div class="box-uploadDownload pull-right box-file">
<input type="file" unselectable="on" id="stockUpload">
 <div class="box-content">
   <div class="box-icon">
     <i class="fa fa-cloud-upload"></i>
   </div>
   <div class="box-text">
     <div class="box-title">上傳</div>
    <div class="box-intro">上傳倉庫庫存的盤點數據</div>
  </div>
 </div>
</div>

.box-uploadDownload {
    position: relative;  /*絕對定位*/
    width: 98%;
    height: 320px;
    padding-top: 100px;
    border: 1px dashed rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.02);
    transition: all 0.3s;
}

.box-file input {
    position: absolute;  /*相對定位*/
    left: 0;
    top: 0;
    width: 100%;
    height: 320px;
    font-size: 0;   
    opacity: 0;      /*隱藏*/
    filter: alpha(opacity=0); /*隱藏*/
    cursor: pointer;
}