上傳按鈕樣式的終極解決方案_input透明法

方法/步驟

1. 預設的上傳按鈕非常醜陋，而且樣式不易修改，并且在不同浏覽器中展現的形式還不一樣。

   

2. 解決方案:最好的解決辦法就是将我們要用來修改的樣式放在一個div中，并且放在input按鈕的下面，而input顯示透明。

3. 這樣實際點選的input看着好像點選的那張圖檔了。

   <div class="div1">

       <div class="div2">上傳圖檔</div>

       <input type="file" class="inputstyle">

   </div>

   

4. 給其增加樣式：

   <style>

   .div1{

   float: left;

   height: 41px;

   background: #f5696c;

   width: 144px;

   position:relative;

   }

   .div2{

   text-align:center;

   padding-top:12px;

   font-size:15px;

   font-weight:800

   }

   .inputstyle{

       width: 144px;

       height: 41px;

       cursor: pointer;

       font-size: 30px;

       outline: medium none;

       position: absolute;

       filter:alpha(opacity=0);

       -moz-opacity:0;

       opacity:0; 

       left:0px;

       top: 0px;

   }

   </style>

   <div class="div1">

       <div class="div2">上傳圖檔</div>

       <input type="file" class="inputstyle">

   </div>

   如此就可以是實作“點選$(".div2")上傳檔案”的效果了。