<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. codevs 1421 秋静叶&秋穣子(树上DP+博弈)

    1421 秋静叶&秋穣子   题目描述 Description 在幻想乡,秋姐妹是掌管秋天的神明,作为红叶之神的姐姐静叶和作为丰收之神的妹妹穰子.如果把红叶和果实联系在一 起,自然会想到烤红薯 ...

  2. iOS设备的重力感应

    重力感应是每台iOS设备都具备的功能,所以在应用用好重力感应会有意想不到的效果 1.添加CoreMotion框架 2.在需要使用重力感应的类中添加头文件 #import <CoreMotion/ ...

  3. pecl/mongo is already installed

    sw-engine-cgi PHP MongoDB database drivermongodb database driver,数据库驱动;

  4. TCP 的那些事儿(上)

    TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过程,但对于学习的过程却能让人有很多收获.关于TCP这个协议的细节,我还是推荐你去 ...

  5. WinForm------自定义YearMonthEdit组件

    转载: http://www.cnblogs.com/axing/p/3201066.html 注意: 1.需要在vs里面,添加一个YearMonthEdit组件,然后将链接里面的代码拷贝到里面 2. ...

  6. String的成员方法的使用

    <%@ page language="java" contentType="text/html; charset=gbk"%> <html&g ...

  7. 开发期间的GWT设置---加快编译速度

    随着项目功能的完善,GWT模块(Module)越来越多,当要以web模式编译给测试组使用时,编译的总时间越来越多,我的机器编译完8个模块,需要10分钟左右. 抽空研究了一下GWT的编译参数和GWT编译 ...

  8. wdlinux mysql innodb的安装

    mysql innodb的安装 wget -c http://down.wdlinux.cn/in/mysql_innodb_ins.sh chmod 755 mysql_innodb_ins.sh ...

  9. 将html中的br换行符转换为文本输入中的换行符(转)

    PHP中的有个非常好的函数:nl2br(),将文本框中的换行转换为HTML页面的<br />,但是如何实现将html中的<br />换行符转换为文本框中的换行符呢?下面这几个方 ...

  10. android 40 Io编程

    Io编程:内存卡和sd卡.字符串存入内存卡然后读出来. activity: package com.sxt.day06_06; import java.io.FileInputStream; impo ...