<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. 开启gdb调试功能

    设置/etc/yum.repos.d/CentOS-Debuginfo.repo,修改[debug项下的enabled的值为1];

  2. C/C++基础(二)

    (1)运算符优先级 #include <cstdio> using namespace std; int main() {    unsigned char a = 0xA5;    un ...

  3. JuliaSet&MandelBulb @ Maya&KK —— 4亿粒子的测试

    分形是数学里最美的一个话题之一,美在 无限的细节 在尺寸上的自相似 这两个特征造成的牛逼效果就是随便选择分形上的一个小坑或者小山包拉进后又是一个广阔的世界,而把这个世界中的一个小坑或者小山包拉进又™是 ...

  4. PPT 学习总结

    PPT高效制作流程1.把word导入PPT2.在PPT里实现随机抽奖3.逻辑的调整:给PPT增加小节,来增强PPT的逻辑性4.设计PPT的母板,并可保存为自己的母板供以后使用 数据收集中国宏观经济统计 ...

  5. Latex笔记(参考文献) 分类: LaTex 2014-11-08 17:41 239人阅读 评论(0) 收藏

    当你用LaTeX来写文档,在管理参考文献时,你可能会用到bibtex, 也许你会嫌麻烦,会选择用 \begin{thebibliography}{10} \bibitem xxxx \bibitem ...

  6. CMake 简单介绍 图

    http://tech.uc.cn/?p=914     CMake特点 CMake需要用户用CMake规范的语法编写CMake脚本,该语法简单易用,入门极其顺手 原生支持 C/C++/Fortran ...

  7. CHAR 详解

    CHAR(20):20指的是表中的a字段能存储的最大字符个数 CREATE TABLE `a` ( `a` char(20) DEFAULT NULL) ENGINE=InnoDB DEFAULT C ...

  8. (转载)linux那点事儿(中)

    原文地址:http://www.cnblogs.com/fnng/archive/2012/03/19/2407162.html 本文只是转载供自己学习之用 2012-03-22 13:31 by 虫 ...

  9. 转载:JAVA 正则表达式 (超详细)

    在Sun的JavaJDK 1.40版本中,Java自带了支持正则表达式的包,本文就抛砖引玉地介绍了如何使用Java.util.regex包. 可粗略估计一下,除了偶尔用Linux的外,其他Linu x ...

  10. struts2 OGNL 表达式

    一.Struts 2支持以下几种表达式语言: OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言:JSTL(JSP Standard ...