雖然我們無法直接更改表單的input[type=file]按鈕，但是可以通過曲線救國的方式來實現。

思路大致是這樣的：

1、將按鈕設定透明度為0

2、在上面覆蓋一個button，使二者位置完全重合，這樣就可以實現改變上傳按鈕的樣式，而不會影響上傳功能。

HTML程式碼如下

<span class="sl-custom-file">
    <input type="button" value="點選上傳檔案" class="btn-file"/>
    <input type="file" class="ui-input-file" />
</span
 
>

CSS程式碼

.sl-custom-file {
        position: relative;
        display: inline-block;
        zoom: 1;
        cursor: pointer;
        overflow: hidden;
        vertical-align: middle;
    }
.btn-file{
        background-color: #E95C33 !important;
            color: #fff !important;
            border
 
: 1px solid #E95C33 !important;
            width: 150px !important;
            border-radius: 0 !important;
}    
  .sl-custom-file .ui-input-file {
        position: absolute;
        right: 0;
        top: 0;
        _zoom: 30;
        font-size: 300px \9;
        height: 100%;
        _height: auto;
        opacity
 
: 0;
        filter: alpha(opacity=0);
        -ms-filter: "alpha(opacity=0)";
        cursor: pointer;
    }