純 css 樣式化上傳按鈕

上傳的按鈕是沒有直接用 css 樣式化的，不過可以用一些小技巧來做到。


要的話就先在原本的上傳按鈕外再包一層。

view plaincopy to clipboardprint

1. <div class="fileUpload btn btn-primary">  
2.     <span>Upload</span>  
3.     <input id="uploadBtn" type="file" class="upload" />  
4. </div>  

範例是用 bootstrap 的，所以要先把 bootstrap 抓進來，再加上這些 css 調整。

view plaincopy to clipboardprint

1. .fileUpload {   
2.     position: relative;   
3.     overflow: hidden;   
4.     margin: 10px;   
5. }   
6. .fileUpload input.upload {   
7.     position: absolute;   
8.     top: 0;   
9.     right: 0;   
10.     margin: 0;   
11.     padding: 0;   
12.     font-size: 20px;   
13.     cursor: pointer;   
14.     opacity: 0;   
15.     filter: alpha(opacity=0);   
16. }  

然後就可以看到效果了，不過這樣的話原本的顯示檔案名稱的地方就會不見了，不過可以加上 js 把值給丟到指定的地方去。


來源


Demo