解决办法:使用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{
        width: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;
        width:276px;
        height:36px;
        overflow: hidden;
    }
    input.textbox{
        float:left;
        padding:5px;
        color:#999;
        height:24px;
        line-height:24px;
        border:1px #ccc solid;
        width: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>

CSS自定义文件上传按钮样式,兼容主流浏览器的更多相关文章

  1. CSS自定义文件上传按钮

    今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选 ...

  2. css 文件上传按钮美化

    转自:http://zixuephp.net/article-85.html 思路:在一个div里面添加一个图片用作按钮再添加一个input file 文件上传,把文件上传按钮设置透明度为0,绝对定位 ...

  3. 上传按钮样式优化 <input type="file" />

    <html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...

  4. 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法

    (uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...

  5. 修改input file 文件上传的样式

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  6. 文件上传下载样式 --- bootstrap

    在平时工作中,文件上传下载功能属于不可或缺的一部分.bootstrap前端样式框架也使用的比较多,现在根据bootstrap强大的样式模板,自定义一种文件下载的样式. 后续会使用spring MVC框 ...

  7. Java实现文件上传-按钮弹出上传页面

    转自: https://blessht.iteye.com/blog/1405057 最近自己在做一个小系统玩的时候涉及到了文件的上传,于是在网上找到Java上传文件的方案,最后确定使用common- ...

  8. 再springMVC中自定义文件上传处理解决与原spring中MultipartResolve冲突问题

    相信很多朋友再用springmvc时都遇见了一个问题,那就是自带的获取上传的东西太慢,而且不知道如何修改,其实不然,spring框架既然给我们开放了这个接口,就一定遵从了可扩展性的原则,经过查看org ...

  9. 项目二、自定义文件上传函数(js函数)

    /** * 文件上传工具 v1.0 * @param file 要上传的文件 * @param url 要上传到的路径 * @param div 要显示的区域 */ function uploader ...

随机推荐

  1. *AtCoder Regular Contest 096E - Everything on It

    $n \leq 3000$个酱,丢进拉面里,需要没两碗面的酱一样,并且每个酱至少出现两次,面的数量随意.问方案数.对一给定质数取模. 没法dp就大力容斥辣.. $Ans=\sum_{i=0}^n (- ...

  2. hdu 4778 Gems Fight! 状压dp

    转自wdd :http://blog.csdn.net/u010535824/article/details/38540835 题目链接:hdu 4778 状压DP 用DP[i]表示从i状态选到结束得 ...

  3. max file descriptors [4096] for elasticsearch proess is too low, increase to at least [65536]

    修改文件 /etc/security/limits.conf 加入以下两行: sonar hard nofile 65536 sonar soft nofile  65536 #备注:sonar这里是 ...

  4. Currency Exchange(最短路)

    poj—— 1860 Currency Exchange Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 29851   Ac ...

  5. ubuntu远程桌面设置

    一.服务器端电脑设置: 1.在搜索端搜索desktop sharing,然后设置后退出 二.客户端电脑设置: 1.在搜索端搜索remmina remote desktop client 2.如图设置: ...

  6. Spring MVC集成Spring Data Reids和Spring Session实现Session共享出现:No bean named 'springSessionRepositoryFilter' available

    出现这个问题:No bean named 'springSessionRepositoryFilter' available的的原因: 1.Spring MVC加载了多个配置文件导致的,并不是版本问题 ...

  7. oracle存储过程中使用字符串拼接

    1.使用拼接符号“||” v_sql := 'SELECT * FROM UserInfo WHERE ISDELETED = 0 AND ACCOUNT =''' || vAccount || '' ...

  8. IOS --关于粘贴板 ,剪切板 ,UILabel的复制

    在iOS中下面三个控件,自身就有复制-粘贴的功能: 1.UITextView 2.UITextField 3.UIWebView UIKit framework提供了几个类和协议方便我们在自己的应用程 ...

  9. Git checkout on a remote branch does not work

    I believe this occurs when you are trying to checkout a remote branch that your local git repo is no ...

  10. es中插入数据

    es中插入数据 学习了:https://www.imooc.com/video/15769/0 分为指定Id和自动生成Id两种: 1,指定Id使用PUT操作 PUT http://127.0.0.1: ...