<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. PHP函数:PHP_SELF

    php_self是php的内置变量,记作$php_self,其作用是实现“页内跳转”.这里的页内跳转不同等于html的书签之类的跳转,而是php程序通过URL的尾参数的改变在同一个程序里提供不同的We ...

  2. C —— 零碎笔记

    1.字节对齐和结构体大小 链接 2.共同体union 的作用 链接 3.文件夹和文件操作 windows: http://blog.csdn.net/gneveek/article/details/6 ...

  3. thinkphp 获取客户端ip地址方法

    /** * 获取客户端IP地址 * @param integer $type 返回类型 0 返回IP地址 1 返回IPV4地址数字 * @param boolean $adv 是否进行高级模式获取(有 ...

  4. uva10829 L-Gap Substrings

    题意 给出一个长度为\(n(\leqslant 50000)\)的字符串,求形如\(\mathrm{UVU}\)形式的字串,其中\(\mathrm{V}\)的长度给定. 题解 枚举\(\mathrm{ ...

  5. RichTextBox 右键显示 ContextMenuTrip 分类: C# 2014-10-16 10:43 337人阅读 评论(0) 收藏

    说明: (1)命名: RichTextBox  -> rtxt1 ContextMenuTrip -> cms1 (2)截图: (3)完整代码: <span style=" ...

  6. Docker的基本操作

    容器基本操作 1.启动容器 $docker run image [COMMAND] [ARG…] run在新容器中执行命令 2.启动交互式容器 $docker run -i -t IMAGE /bin ...

  7. 匿名类型和Object转换

    本文转载:http://www.cnblogs.com/JustRun1983/archive/2012/05/13/2497997.html net中的匿名类型非常好用, 但是开发中遇到一个问题,当 ...

  8. ASP.NET通过http/https的POST方式,发送和接受XML文件内容

    本文转载:http://hi.baidu.com/ysyhyt/item/5011ae39ce3cf49fb80c0395 本文参考:http://blog.csdn.net/ououou123456 ...

  9. strstr和memcmp函数的实现

    #include <stdio.h> #include <stdlib.h> //malloc()函数 typedef unsigned int size_t; size_t ...

  10. 再回首,Java温故知新(十一):Java反射

    最近继续回顾Java基础,进行到了Java反射这一部分,个人感觉这部分应该算是Java的高级特性了,在日常开发中使用的并不多,应用人员主要是工具构建人员,所以这次学习中以了解为主,Java反射主要应用 ...