type=“file”的input標籤美化

開發中用到<input type="file">原生標籤，樣式真的好low，醜爆了好嗎。

這種情況下我們就需要自己寫樣式了。

第一，讓我們選擇的檔案路徑可以顯示給使用者看，第二把選擇檔案按鈕美化，並刪除“未選擇任何檔案”位置的文字。

同時為了避免使用者輸錯地址，我們用<input type="file">的標籤將顯示所選檔案路徑的輸入框和按鈕遮擋。這樣無論點選輸入框還是按鈕都是觸發的<input type="file">標籤，當然要將<input type="file">標籤隱藏掉並將它的z-index設定在輸入框和按鈕之上。

效果圖：

程式碼如下：

<label for="">檔案路徑：</label>
      <div class="upGroup">
           <input type="file" class="fileIpt" />
           <input type="text" class="text input-border-style">
           <a href="javascript:void(0)" class="aBtn text-center">瀏覽</a>
      </div>

CSS程式碼如下：

.upGroup{
    display: inline-block;
    width: 73%;
    position: relative
}

.fileIpt{
    position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);cursor:pointer;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 10;
}

.text{
    width: 80%;
}

.input-border-style{
    padding:.2rem 1.3rem .2rem .5rem;
    border:1px solid #BFC7CF; 
    color:#63696c;
    font-size:.7rem; 
    border-radius:5px;
}

.aBtn{
    outline:none;border:1px solid #c4c7ca;background:#f2f6fc; border-radius:3px;
    color: #91969a;
    width: 16.58%;
    position: absolute;
    right: 0;
    line-height: 2rem;
}

.text-center{

      text-align:center;

}