# input file 修改預設CSS樣式

相信在座的各位在html寫到原生上傳功能時，大概都會遇到類似的問題
就是~~原生input好醜~~..
或者原生的樣式與專案風格大大不相符，該怎麼更改呢？

<input type="file" ... >

:arrow_down: input原生樣式

原本以為簡單用CSS在input隨便加個class，
就可以了吧！ 有奪難？
後來發現事情沒這麼單純...

### HTML結構
首先建議結構如下：

<input id="upload" type="file">
<label type="button" for="upload" class="uploadStyle">
    選擇檔案
</label>

要漂亮樣式的上傳按鈕請使用`<label>`
並且 `input` 跟 `label` 的 **for**
請指向同一個變數名稱
(如上範例是 "upload" )

### CSS的設定
使用屬性選擇器，選到所有type為file的input，並將其隱藏

input[type="file"] {
    display: none;
}
.uploadStyle {
    /* label的樣式 */
}

這樣的做法可以讓預設的樣式消失（就是如此簡單暴力！）
因為input疊在label上，所以點擊看得到的label時
其實就是點到input的上傳功能噢

那接下來就能快樂設定label樣式囉！