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

方法/步骤

  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透明法

阅读更多
文章标签: 上传按钮 透明 css
个人分类: css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭