<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. MIPI DSI协议介绍

    此文根据网上的资料翻译和整理而来 一.MIPI MIPI(移动行业处理器接口)是Mobile Industry Processor Interface的缩写.MIPI(移动行业处理器接口)是MIPI联 ...

  2. codeforces 421d bug in code

    题目链接:http://codeforces.com/problemset/problem/421/D 题目大意:每个人说出自己认为的背锅的两个人,最后大BOSS找两个人来背锅,要求至少符合p个人的想 ...

  3. crontab使用--linux下的定时任务程序

    crontab是一个linux下的定时运行程序,如果我们想让自己的程序定时执行, 可以把自己的程序交给这个程序来完成 第一步:配置crontab的脚本的默认编辑器,它的默认的编辑器不好用,我们配置vi ...

  4. python_list和tuple互转

    Python中,tuple和list均为内置类型, 以list作为参数将tuple类初始化,将返回tuple类型 tuple([1,2,3,4]) list->tuple 以tuple做为参数, ...

  5. sublime text2 快捷键

    主要快捷键列表: Ctrl+L 选择整行(按住-继续选择下行)Ctrl+KK 从光标处删除至行尾Ctrl+Shift+K 删除整行Ctrl+Shift+D 复制光标所在整行,插入在该行之前Ctrl+J ...

  6. css开发经验&错误习惯

    CSS开发经验 1.尽量用class来定义样式.尽量少使用  .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会 ...

  7. 接口作为参数,不同的接口调用不同的方法,例如:输出“I love Game”或输出“我喜欢游戏”

    接口的思想:在于可以增加很多类都需要实现的功能.比如:各式各样的商品,可能隶属不同公司,但工商部门都必须具有显示商标的功能(实现同一接口).商标的具体制作由各个公司自己去实现. 给其他类去实现,不同的 ...

  8. 【转】Android通过Wifi来调试你的应用

    http://stormzhang.com/android/2014/08/27/adb-over-wifi/ 在Android中调试我们经常要用一根USB数据线连接到手机和电脑,一方面麻烦不说,手机 ...

  9. optimizer hints

    In version MySQL 5.7.7 Oracle presented a new promising feature: optimizer hints. However it did not ...

  10. 拿走不谢!22 个 Android Studio 优秀插件汇总

    Google 在2013年5月的I/O开发者大会推出了基于IntelliJ IDEA java ide上的Android Studio.AndroidStudio是一个功能齐全的开发工具,还提供了第三 ...