解决办法:使用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. css解析规则

    1.因为css对空格不敏感,因此在每个样式后都要加一个分号,不然会把写在后面的样式当成一个整体来解析,直到遇到分号为止. 2.当遇见不认识的属性或值时,将忽略这个属性,继续解析后面的属性. 3.对于复 ...

  2. XPath中的轴

    这个博客中有一系列的例子,不仅有child的例子:http://www.cnblogs.com/zhaozhan/archive/2009/09/10/1563723.html XPath 是一门在 ...

  3. VMware虚拟机下安装hadoop1.x

    这是Hadoop学习全程记录第1篇,在这篇里我将介绍一下如何在Linux下安装Hadoop1.x. 先说明一下我的开发环境: 虚拟机:VMware8.0: 操作系统:CentOS6.4: 版本:jdk ...

  4. Java下接口interface前面要不要加I

    说明:加I和不加I都可以,看需要,没有强制要求. 在Java中更多是提倡不加I的,可以看下JDK的源码,都是不加I的. 微软C#是规定要加I,这也是影响从而导致有这个话题的原因. Java中特定不直接 ...

  5. for 循环进化史

    ECMAScript 6已经逐渐普及,经过二十多年的改进,很多功能也有了更成熟的语句,比如 for 循环 这篇博客将介绍一下从最初的 for 循环,到 ES6 的 for-of 等四种遍历方法 先定义 ...

  6. CAS 跨域原理

    http://www.blogjava.net/rain1102/articles/227739.html CAS(Central Authentication Service) 是 Yale 大学发 ...

  7. Delphi GDI对象之绘制文本

    转载:http://www.cnblogs.com/pchmonster/archive/2012/07/06/2579185.html 基本绘图操作(Basic Drawing Operations ...

  8. git 更新远程分支

    使用git的时候,有时候会出现远端更新了一个分支,但是从本地想checkout一个远程分支时,会出现如下错误: fatal: git checkout: updating paths is incom ...

  9. 转:CEO, CFO, CIO, CTO, CSO是什么

    转自:https://club.1688.com/threadview/26957122.html CEO, CFO, CIO, CTO, CSO是什么?(现在O太多了) 帖子创建时间:  2009年 ...

  10. Android锁屏或灭屏状态下,高速按两次音量下键实现抓拍功能(1.2Framework层使用startService形式实现)

        如前一篇博文所分析.我们能够使用广播的形式在高速按下两次音量下键的时候发出广播,以方便client进行捕捉. 既然有两种方式能够实现该Issue那么哪种方式是首选呢?     我个人推荐使用启 ...