上传按钮样式的终极解决方案_input透明法

方法/步骤

1. 默认的上传按钮非常丑陋，而且样式不易修改，并且在不同浏览器中展现的形式还不一样。

   

2. 
   

3. 
   

4. 
   

5. 解决方案:最好的解决办法就是将我们要用来修改的样式放在一个div中，并且放在input按钮的下面，而input显示透明。

6. 这样实际点击的input看着好像点击的那张图片了。

   <div class="div1">

       <div class="div2">上传图片</div>

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

   </div>

   

7. 
   

8. 
   

9. 
   

10. 给其增加样式：

    <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")上传文件”的效果了。

    
11.