最近碰到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. 关于使用tracert命令检测网络问题

    tracert命令是一个电脑网络工具-Windows命令行界面程序和内建命令,运行该命令后可以显示本机IP到达目标IP所经过的路由器IP地址,和响应的延迟信息! 在windows操作系统中,点击“开始 ...

  2. where子句的使用

    关系运算符: = > < <= >= != <> 略. 有一个<=> 有啥用? 其实也是判断等于. 不比较NULL值,效果就和= 一样,比较NULL值, ...

  3. 关于collapsed margin（外边距合并）

    这是前面写postion定位时写到最后面的例子的时候发现的一个问题,于是专门写一篇随笔来解释记录一下,毕竟两个知识点同时写在一篇文章里面有点混乱的感觉.. 上篇随笔position定位遇到的问题在这里 ...

  4. 《CSS3专业网页开发指南》笔记

    书本:<CSS3专业网页开发指南>(the book of css3) Peter Gasston 著    李景媛 吴晓嘉 译 第1章: 1.box-sizing : IE8及以上版本 ...

  5. Excel VBA自动添加证书

    ---恢复内容开始--- 在说这个话题之前,我先解释一下为什么要加数字证书签名,它有什么作用,后面再解释如何添加.首先解释下证书添加的位置,如下图所示: 1.单击左上角的Office 按钮,选择右下角 ...

  6. 【整理】--VC 编译整理

    .h用于编译阶段的审核,如在math.h中有函数声明:int abs(int);但是在使用中写为#include <math.h>...abs(3,5);编译器阶段就会检测出错误. .dl ...

  7. Could not create the view: An unexpected exception was thrown 异常处理

    MyEclipse 打开后有时候莫名的在server窗口里抛出"Could not create the view: An unexpected exception was thrown&q ...

  8. 意外作出了一个javascript的服务器,可以通过js调用并执行任何java(包括 所有java 内核基本库)及C#类库,并最终由 C# 执行你提交的javascript代码! 不敢藏私,特与大家分

    最近研发BDC 云开发部署平台的数据路由及服务管理器意外作出了一个javascript的服务器,可以通过js调用并执行任何java(包括 所有java 内核基本库)及C#类库,并最终由 C# 执行你提 ...

  9. 阿里云中Centos下配置防火墙

    一.检查iptables服务状态 [root@woxplife ~]# service iptables status iptables: Firewall is not running. 说明ipt ...

  10. 使用 Aspose.Slide 获取PPT中的所有幻灯片的标题

    本文使用的是第三方类库 Aspose.Slide,如果你使用的是OpenXml可以看下面的链接,原理是相同的,这个文章里也有对Xml标签的详细解释. 如何:获取演示文稿中的所有幻灯片的标题 原理: 原 ...