自定義input file 2 整個圖片區域
阿新 • • 發佈:2019-03-06
技巧總結:
- 內容區域和inputfile 相對定位;
- 將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;
}