Bootstrap 樣式化檔案上傳按鈕

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

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

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

  1. .btn-file {   
  2.     positionrelative;   
  3.     overflowhidden;   
  4. }   
  5. .btn-file input[type=file] {   
  6.     positionabsolute;   
  7.     top: 0;   
  8.     right: 0;   
  9.     min-width100%;   
  10.     min-height100%;   
  11.     font-size100px;   
  12.     text-alignright;   
  13.     filter: alpha(opacity=0);   
  14.     opacity: 0;   
  15.     outlinenone;   
  16.     backgroundwhite;   
  17.     cursor: inherit;   
  18.     displayblock;   
  19. }  

來源: Twitter Bootstrap Form File Element upload button

留言