zoukankan      html  css  js  c++  java
  • css input[type=file] 样式美化,input上传按钮美化

    http://www.haorooms.com/post/css_input_uploadmh

    思路是外层用a标签包裹住,样式自己设置,内层的input[type=file]设置为透明

    <a class="lnk-create isay-upload-inp" href="javascript:;">
    <input tabindex="2" autocomplete="off" name="image" title="可传多张照片" type="file" multiple="" accept="image/jpg,image/jpeg,image/bmp,image/gif,image/png,">
    <i>+</i>发照片
    </a>

    .photo{position:relative}
    .photo .photo-btns{position:absolute;right:0;top:0;50%;text-align:right}
    .photo .btn-pic-upload{margin-left:1em;}
    .isay-upload-inp{position: relative;cursor: pointer;}
    //注意,这里不能填写width
    .isay-upload-inp input{position: absolute;opacity: 0;right: 0;cursor: pointer;filter: alpha(opacity=0);}

    a.lnk-create{display:inline-block;zoom:1;padding:0 10px 0 10px;vertical-align:baseline;line-height:1.5;height:1.5em;overflow:hidden;border:1px solid #edded4;border-radius:2px;letter-spacing:2px}
    a.lnk-create i{display:inline-block;zoom:1;margin-right:4px;font-size:16px;color:#432d0f;vertical-align:baseline;line-height:1;font-style:normal}
    a.lnk-create:link,a.lnk-create:visited{color:#777;background:#fcf7f3}
    a.lnk-create:active,a.lnk-create:hover{color:#777;background:#fbf4ef;border-color:#e7d2c5}

    这就是效果了

    
    



  • 相关阅读:
    内存
    jmeter设置全局变量
    tomcat(1)
    JVM(一)
    内存溢出
    消息中间件
    上下文切换(二)
    平均负载(二)
    requests模块
    Pycharm如何配置Git
  • 原文地址:https://www.cnblogs.com/as3lib/p/6858116.html
Copyright © 2011-2022 走看看