<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. 在Eclipse中格式化Android代码

    我们用Eclipse做Android开发的时候,可以导入Google提供的profile文件,这样每次"Ctrl+Shift+F"的时候,IDE就能够按照官方的规范来进行代码格式化 ...

  2. MVC 5 第一章 起航

    本章将讲述一些构建ASP.NET  MVC 5 web application的一些基础知识, 通过本章学习,你应该能够掌握到构建MVC 5应用程序的基本步骤,并且通过展示一个完整的MVC 5 hel ...

  3. weblogic 日志介绍

    1.server.log 该日志记录的是服务(包括admin server 和 app server)启动过程中和关闭过程中的日志,还包括部署在服务上面的应用,在运行过程中所产生的日志. server ...

  4. python实现应用程序在右键菜单中添加打开方式

    最近项目组开发的一个小工具想要在右键菜单中添加打开方式,以有道云笔记为例进行了需求拆解和代码编写 1.需求拆解: 如何实现手动添加右键菜单的打开方式: Step1:打开注册表编辑器,Win+R-> ...

  5. sql 数据字段类型

    bit    整型 bit数据类型是整型,其值只能是0.1或空值.这种数据类型用于存储只有两种可能值的数据,如Yes 或No.True 或False .On 或Off. 注意:很省空间的一种数据类型, ...

  6. C#与C++函数调用

    在 上篇文章重点讲解数据类型的转换,在此基础上再讲解函数调用. 1.函数调用 c++中函数 INF_NET_API INF_RESULT WINAPI INF_NET_GetList(long lLo ...

  7. localstorage 初谈

    废话 : localStorage作为本地存储,比cookie大,可以看做一个小的服务器,几个api也可以看做增,删,查,找..... 设置 window.localStorage.setItem() ...

  8. SqlServer快捷键整理

    一:sp_helptext 对象 1.Ctrl+D 表格显示 2.Ctrl+T 文本显示(含格式)

  9. IO之流程与buffer 图

    http://blog.chinaunix.net/uid-29075379-id-3944364.html

  10. java.sql.SQLException: Invalid parameter object type. Expected 'java.util.Map' but found 'java.lang.String 转载

    java.sql.SQLException: Invalid parameter object type. Expected 'java.util.Map' but found 'java.lang. ...