关闭

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

标签: 上传按钮透明css
1063人阅读 评论(0) 收藏 举报
分类:

方法/步骤

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

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



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

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

    <div class="div1">

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

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

    </div>

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



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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:95091次
    • 积分:1456
    • 等级:
    • 排名:千里之外
    • 原创:37篇
    • 转载:98篇
    • 译文:0篇
    • 评论:4条
    最新评论