實現思路：

1. a標籤包裹input元素
2. 設定a標籤為上傳按鈕的樣式，相對定位
3. 設定input為透明，絕對定位，覆蓋到a上面

效果：看到的按鈕是a的樣式，點選時實際是點選input元素。樣式和功能都具備

html程式碼：

<a href="javascript:;" class="file">選擇檔案 
　　<input type="file" > 
</a>

CSS程式碼：

.file {
    position: relative;
    display: inline-block;
    border: 1px solid #333;
    padding: 4px 10px;
    overflow: hidden;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    border-radius: 5px;
    color: #000;
    background:#ccc; /* 一些不支援背景漸變的瀏覽器 */  
    background:-moz-linear-gradient(top, #fff, #ccc);  
    background:-webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#ccc));  
    background:-o-linear-gradient(top, #fff, #ccc); 
}
.file input {    
    position: absolute;    
    font-size: 50px;    
    right: 0;    
    top: 0;    
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
 

效果：

此時上傳檔案的檔名不顯示，需要用js處理：

效果: