Bootstrap 樣式化檔案上傳按鈕

一般css是不允許修改上傳按鈕的樣式，所以使用 bootstrap 時就沒有給上傳按鈕樣式化的方式，不過用一些小技巧還是可以達成。

view plaincopy to clipboardprint

1. <span class="btn btn-default btn-file">  
2.     Browse <input type="file">  
3. </span>  

原理其實就是把原本的上傳按鈕變透明(不是隱藏喔，在 CSS 內是不一樣的東西)，然後再用 CSS 將樣式蓋上去就可以了。

view plaincopy to clipboardprint

1. .btn-file {   
2.     position: relative;   
3.     overflow: hidden;   
4. }   
5. .btn-file input[type=file] {   
6.     position: absolute;   
7.     top: 0;   
8.     right: 0;   
9.     min-width: 100%;   
10.     min-height: 100%;   
11.     font-size: 100px;   
12.     text-align: right;   
13.     filter: alpha(opacity=0);   
14.     opacity: 0;   
15.     outline: none;   
16.     background: white;   
17.     cursor: inherit;   
18.     display: block;   
19. }  

來源: Twitter Bootstrap Form File Element upload button