純 css 樣式化上傳按鈕

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


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

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


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

  1. .fileUpload {   
  2.     positionrelative;   
  3.     overflowhidden;   
  4.     margin10px;   
  5. }   
  6. .fileUpload input.upload {   
  7.     positionabsolute;   
  8.     top: 0;   
  9.     right: 0;   
  10.     margin0;   
  11.     padding0;   
  12.     font-size20px;   
  13.     cursorpointer;   
  14.     opacity: 0;   
  15.     filter: alpha(opacity=0);   
  16. }  


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


來源


Demo


留言