zoukankan      html  css  js  c++  java
  • CSS自定义文件上传按钮样式,兼容主流浏览器

    解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明。
    ​1.图片

    2. [代码][HTML]代码     

    <div class="box">
         <input type="text" name="copyFile"  class="textbox" />
         <a href="javascript:void(0);"  class="link">浏览</a>
         <input type="file" class="uploadFile" name="upload"
         onchange="getFile(this,'copyFile')" />
    </div>
    3. [代码][CSS]代码     

    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        body {
            font:14px Verdana, Arial, Geneva, sans-serif;
            color:#404040;http://www.huiyi8.com/24jieqi/
            background:#fff;
        }二十四节气图片
        img {
            border-style:none;
        }
        .main{
            300px;
            height:60px;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-150px;
            margin-top:-30px;
        }
        .box{
            position:relative;
            float:left;
        }
        input.uploadFile{
            position:absolute;
            right:0px;
            top:0px;
            opacity:0;
            filter:alpha(opacity=0);
            cursor:pointer;
            276px;
            height:36px;
            overflow: hidden;
        }
        input.textbox{
            float:left;
            padding:5px;
            color:#999;
            height:24px;
            line-height:24px;
            border:1px #ccc solid;
            200px;
            margin-right:4px;
        }
        a.link{
            float:left;
            display:inline-block;
            padding:4px 16px;
            color:#fff;
            font:14px "Microsoft YaHei", Verdana, Geneva, sans-serif;
            cursor:pointer;
            background-color:#0099ff;
            line-height:28px;
            text-decoration:none;
        }
    </style>

  • 相关阅读:
    BZOJ2199[Usaco2011 Jan]奶牛议会——2-SAT+tarjan缩点
    BZOJ3862Little Devil I——树链剖分+线段树
    BZOJ2325[ZJOI2011]道馆之战——树链剖分+线段树
    BZOJ1018[SHOI2008]堵塞的交通——线段树
    BZOJ2733[HNOI2012]永无乡——线段树合并+并查集+启发式合并
    BZOJ4127Abs——树链剖分+线段树
    bzoj 4753 最佳团体
    bzoj 4472 salesman
    bzoj 5369 最大前缀和
    bzoj 1226 学校食堂Dining
  • 原文地址:https://www.cnblogs.com/xkzy/p/3887099.html
Copyright © 2011-2022 走看看