zoukankan      html  css  js  c++  java
  • 关于type="file"的input框样式修改

    表单中的input type=”file”在前端开发中经常会用到,很悲剧的是input type=”file”在各个浏览器下表现不统一,样式很难起作用;下面具体解决方法:

    1.图片定位叠加方案

    就是通过将type="file"这个上传按钮透明后,然后叠加在一个图片上

    #up-button{
    cursor: pointer;
    opacity: 0;
    /*ie低版本不支持opacity的 只支持filter
    为了兼容*/
    100px;
    filter: alpha(opacity=0);
    outline: none;
    }
    <a href="javascript:void(0)"><input type="file" id="up-button"/></a>
    2.webkit的方案-webkit-file-upload-button 

    只有对webkit内核有效,如果不支持带-webkit-前缀的写法,就没任何效果了

    代码如下:
    <input type="file" id="upfile">
    input[type="file"]::-webkit-file-upload-button {position: absolute;top: 10px;left: 10px; 64px;height: 64px;overflow: hidden;line-height: 99em;background:url(‘’) no-repeat 0 0;border: 0 none;z-index: 2;}
     
  • 相关阅读:
    spring-ioc
    Hibernate之二级缓存
    hibernate之HQL语句
    hibernate 多对多关联关系
    hibernate关联关系(一对多)
    Hibernate之主键生成策略
    struts2的CRUD
    struts2的OGNL
    struts2的初步认识
    Maven介绍
  • 原文地址:https://www.cnblogs.com/GoTing/p/6207388.html
Copyright © 2011-2022 走看看