<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. oracle中多表查询优化笔记

    ORACLE有个高速缓冲的概念,这个高速缓冲呢就是存放执行过的SQL语句,对应已经执行过的sql语句,第二次执行的时候速度会比第一次块,用的就是高速缓冲.ORACLE的高速缓冲是全字符匹配的,如果sq ...

  2. galera mysql 多主复制启动顺序及命令

    Mysql 被复制机 sql启动

  3. SQL数据类型介绍

    在计算机中数据有两种特征:类型和长度.所谓数据类型就是以数据的表现方式和存储方式来划分的数据的种类.    在SQL Server 中每个变量.参数.表达式等都有数据类型.系统提供的数据类型分为几大类 ...

  4. Hibernate自定义数据库查询(排序、输出条数)

    Hibernate数据库操作类(eg:TexDAO.java) /* * queryString HQL语句,first开始条数, max输出条数 ,norder排序 * 例: List lis = ...

  5. weblogic下 微信公众平台获取token报错

    问题描述: 开发微信公众平台,本地tomcat可以正常获取token并发送模板消息,部署在weblogic后报错,异常信息如下: java.security.InvalidKeyException: ...

  6. flipsnap--手机屏幕水平滑动框架

    在很多手机应用中,大家都会见过这样一种效果:当手指横向滑动屏幕时,屏幕上的页面会向左或向右滑动. 下面介绍一下当用HTML5+CSS3开发手机应用时解决这类效果的一款js框架:flipsnap. fl ...

  7. Seeking USB Serial Com Port in Windows Automatically : via PID VID

    After you read previous article, you might know how to operate a com port in Windows.    But that ex ...

  8. good page

    http://www.cnblogs.com/zrtqsk/category/540486.html

  9. TCP SOCKET中backlog参数的用途是什么? ---图解

    recv_queue中的包大小,为内核的包大小,而不是ip包大小. 如果发出去的包太大,需要修改write_queue和tx_queue两个参数,tx_queue主要是流量控制. 多进程必须在sock ...

  10. 在LINUX中跟踪函数调用----http://stackoverflow.com/

    http://stackoverflow.com/questions/311840/tool-to-trace-local-function-calls-in-linux I am looking f ...