<style>
    .file-group {
        position: relative;
        width: 200px;
        height: 80px;
        border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
        overflow: hidden;
        cursor: pointer;
        line-height: 80px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background-color: #f50;
        border-radius: 4px;
    }
    .file-group input {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 300px;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }
    .file-group:hover {
        background-color: #f60;
    }
</style>
<div class="file-group">
    <input type="file" name="" id="J_File">
    选择文件
</div>

input file文件上传样式的更多相关文章

  1. input file 文件上传标签的样式美化

    input file 文件上传标签的样式美化 将<input type="file">的透明度设置为0: <input type="file" ...

  2. js 实现 input file 文件上传

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

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

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

  4. PHP 多input file文件上传

    前台html jquery代码 后台PHP处理 前台html <form id="form" method="post" enctype="mu ...

  5. input file 文件上传,js控制上传文件的大小和格式

    文件上传一般是用jquery的uploadify,比较好用.后面会出文章介绍uploadify这个插件. 但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input fil ...

  6. 更改file文件上传默认CSS样式

    前言: 多数时候我们需要表单上传文件,如图片.但是浏览器默认的input[file]样式很不友好, 需要我们自己手动修改. 如图基于bootstrap布局的表单, 但file文件上传样式不敢恭维. & ...

  7. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  8. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  9. input type='file'文件上传自定义样式

    使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...

随机推荐

  1. 用Delphi制作仿每行带按钮的列表

    Delphi做程序开发在使用到列表控件时,一般是列表放文本内容,在列表以外放操作按钮,选中列表某项再点按钮进行操作.现在Web开发做列表的样式总是列表的每行都有操作按钮,如微博的列表风格: Web开发 ...

  2. JavaScript的Date 方法

    js中Date 方法 Date (对象) Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash ...

  3. [转载]jquery的extend和fn.extend

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展j ...

  4. 深入hibernate的三种状态【转载】

    这篇文章写得很好,举了很多例子. http://www.cnblogs.com/xiaoluo501395377/p/3380270.html

  5. linux mono

    linux下.net环境; rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm &am ...

  6. 用Autohotkey让powerpoint幻灯片一直播放

    有台电脑专门接了个大电视循环播放一个幻灯片,但是有时候会弹出一些对话框,比如windows要更新之类的,这样的话powerpoint就不是active的进城了,这样幻灯片就会停下来,还需要人去手动点一 ...

  7. 关于session的实现:cookie与url重写

    本文讨论的语境是java EE servlet. 我们都知道session的实现主要两种方式:cookie与url重写,而cookie是首选(默认)的方式,因为各种现代浏览器都默认开通cookie功能 ...

  8. IE8下提示&#39;console&#39;没有定义错误

    在开发的过程中因为调试的原因,在代码中增加console.info("xxxx"),而未进行删除 在IE8下測试该代码所在的页面报错,例如以下: 须要注意的是,使用console对 ...

  9. 为Android GridView 设置行背景

    经常有这样的需求,你的功能图标要像一个个物品,摆放在书架上,像这样: 我的思路比较简单,重载GridView,在他绘制子视图前,先把背景绘制完成 1 2 3 4 5 6 7 8 9 10 11 12 ...

  10. SqlLite 简明教程

    SQL DML 和 DDL        可以把 SQL 分为两个部分:数据操作语言 (DML) 和 数据定义语言 (DDL).         注:"--"双减号为行注释     ...