最近碰到input type=file 之前用模拟点击来实现美化，发现在IE7下会有bug导致图片上传不上去，最后改用直接美化的方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    /*a  upload */

    .a-upload {

        padding: 4px 10px;

        height: 20px;

        line-height: 20px;

        position: relative;

        cursor: pointer;

        color: #888;

        background: #fafafa;

        border: 1px solid #ddd;

        border-radius: 4px;

        overflow: hidden;

        display: inline-block;

        *display: inline;

        *zoom: 1

    }

    .a-upload  input {

        position: absolute;

        font-size: 100px;

        right: 0;

        top: 0;

        opacity: 0;

        filter: alpha(opacity=0);

        cursor: pointer

    }

    .a-upload:hover {

        color: #444;

        background: #eee;

        border-color: #ccc;

        text-decoration: none

    }

    .file {

    position: relative;

    display: inline-block;

    background: #D0EEFF;

    border: 1px solid #99D3F5;

    border-radius: 4px;

    padding: 4px 12px;

    overflow: hidden;

    color: #1E88C7;

    text-decoration: none;

    text-indent: 0;

    line-height: 20px;

}

.file input {

    position: absolute;

    font-size: 100px;

    right: 0;

    top: 0;

    opacity: 0;

}

.file:hover {

    background: #AADFFD;

    border-color: #78C3F3;

    color: #004974;

    text-decoration: none;

}

    </style>

</head>

<body>

    <a href="javascript:;" class="a-upload">

    <input type="file" name="" id="">点击这里上传文件

    </a>

    <a href="javascript:;" class="file">选择文件

        <input type="file" name="" id="">

    </a>

</body>

</html>

非原创，网络收集得到。

input type=file美化的更多相关文章

  1. css input[type=file] 样式美化，input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  2. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  3. input[type=file]的美化

    __ 一般的选择框在美化过程中会出现各种问题,样式出错,文字无法更改等... 所有随之而生的便是这样的一种修饰方式:[将type=file的input与另一个按钮通过js绑定,这样便可以通过改变另一个 ...

  4. input type=file 上传文件样式美化（转载）

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  5. html input[type=file] css样式美化【转藏】

    相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素.所以不能简单的把input隐藏,放个button上去. <a hre ...

  6. 文件上传input type="file"样式美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

    首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...

  8. input[type=file] 样式美化，input上传按钮美化

    <style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...

  9. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

随机推荐

  1. P1-概率论基础（Primer on Probability Theory）

    2.1概率密度函数 2.1.1定义 设p(x)为随机变量x在区间[a,b]的概率密度函数,p(x)是一个非负函数,且满足 注意概率与概率密度函数的区别. 概率是在概率密度函数下对应区域的面积,如上图右 ...

  2. 使用事件等待句柄EventWaitHandler 实现生产者、消费者队列

    using System; using System.Threading; using System.Collections.Generic; class ProducerConsumerQueue ...

  3. boa移植

    1.交叉编译 2.复制文件 配置文件boa.conf 移动到/etc/boa/ 目录下 可执行文件boa移动到/usr/sbin/目录下 3.修改配置文件 4.将Linux系统上/etc/mime.t ...

  4. 实战录 | 基于openflow协议的抓包分析

    <实战录>导语 云端卫士<实战录>栏目定期会向粉丝朋友们分享一些在开发运维中的经验和技巧,希望对于关注我们的朋友有所裨益.本期分享人为云端卫士安全SDN工程师宋飞虎,将带来基于 ...

  5. Windows2003 II6.0 FTP 开了防火墙 FTP不能正常工作的解决办法

    .在防火墙设置的“高级-本地连接-设置”中把FTP的勾选

  6. 9月15日，YTFCloud，创业圈的技术新宠

    成都创业圈近期什么最热? 资本复苏?这本来就是高低起伏规律而已,再说动辄千万的大手笔,对于创业新人.新团队来说太遥远,早期根本无法变现,而资金紧张.项目开发费用超标.没有技术大牛保障等尖锐现实问题能否 ...

  7. php实现验证码

      验证码在表单实现越来越多了,但是用js的写的验证码,总觉得不方便,所以学习了下php实现的验证码.好吧,其实是没有事情干,但是又不想浪费时间,所以学习了下php实现验证码.正所谓,技多不压身.而且 ...

  8. Spring的定时任务配置2（转）

    spring的定时任务配置分为三个步骤: 1.定义任务 2.任务执行策略配置 3.启动任务 1.定义任务 <!--要定时执行的方法--> <bean id="testTas ...

  9. JAVA基于缓冲的文件读写操作

    File f2 = new File("e://index.java"); BufferedReader reader = new BufferedReader(new Input ...

  10. Win2012R2的一个Bug---安装群集后可能引发的软件崩溃问题及相应补丁

    如标题,笔者查阅资料发现微软声称安装故障转角色后就可能发生上述描述问题,但不止于SSMS崩溃.建议使用win2012R2的朋友安装补丁. 笔者在部署win2012R2+Sql2014 cluster时 ...