上传按钮样式的终极解决方案_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")上传文件”的效果了。