一般在做WEB開發項目的時候碰到檔案上傳必不可少，但是因為各家浏覽器對于
标簽支援不同是以在各個浏覽器下的顯示也是不一樣的。可能在使用者體驗方面會形成困擾，今天就給大家介紹一下檔案上傳按鈕的使用者自定義樣式的實作。
實作原理：
建立兩個層，一個層包裝以下簡稱檔案按鈕層，一個層包裝上傳檔案按鈕的自定義樣式，以下漸層樣式層。設定兩個層的大小一緻，将檔案按鈕層設定相對定位position = relative、z-index = 2，将樣式層設定為絕對定位設定position=absolute、z-index = 1并且設定top left屬性使之與檔案按鈕層重疊。這樣就使大小的一樣的兩個層重疊在了一起，并且檔案按鈕層在上面。接下來設定檔案按鈕層為完全透明，便實作了使用者自定義樣式。
下面給出實作代碼，以下代碼可以直接拖動至浏覽器檢視效果，建議使用chrome浏覽器。IE浏覽器對于CSS樣式支援不夠，不能夠顯示漸變效果。
代碼：
hidetypebutton.html
.user-file-outwrap{width: 100px;height: 30px;overflow: hidden;position: relative;border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;}
.user-file-wrap{width: 100%;height: 100%;overflow: hidden;position: relative;z-index: 2;overflow: hidden;}
.user-file-wrap input{margin: 0 0 0 -2px;padding: 0;width: 100%;height: 100%;opacity: 0;filter: alpha(opacity=0);cursor: pointer;}
.user-file-bg{
width: 100%;height: 100%;position: absolute;top: -1px;left: -1px;z-index: 1;text-align: center;font-size: 12px;line-height: 30px;
background-color: transparent;
background-image: -moz-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
background-image: -o-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .85)),to(rgba(247, 247, 247, .85)));
background-image: -webkit-linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
background-image: linear-gradient(top,rgba(255, 255, 255, .85),rgba(247, 247, 247, .85));
border: 1px solid gainsboro;border: 1px solid rgba(0,0,0,0.1) !important;
color: #444;
}
點選上傳 在 IE 浏覽器下沒有漸變效果并且檔案上傳可能需要輕按兩下才能觸發效果