最近碰到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. HTTP请求响应对照表

    1)请求(客户端->服务端[request]) GET(请求的方式) /books/java.html(请求的目标资源) HTTP/1.1(请求采用的协议和版本号) Accept: */*(客户 ...

  2. 专题：mdadm Raid & LVM

    >FOR FREEDOM!< {A} Introduction Here's a short description of what is supported in the Linux R ...

  3. 打印出所有的"水仙花数"，所谓"水仙花数"是指一个三位数，其各位数字立方和等于该数本身。例如：153是一个"水仙花数"，因为153=1的三次方＋5的三次方＋3的三次方。

    public class Three_03 { public static void main(String[] args) { for(int i=100;i<1000;i++){ int a ...

  4. hibernate报错及解决方式

    1 java.sql.BatchUpdateException: ORA-01438: 值大于为此列指定的允许精度 原因:pl/sql number(n),插入的位数大于n

  5. 文件与base64二进制转换

    /// <summary> /// 文件转换为Base64二进制流 /// </summary> /// <param name="FilePath" ...

  6. OpenGL（一）——入门学习

    概要 1. 为什么使用OpenGL 2. 在VS2008上搭建环境 3. 一个简单的例程 OpenGL相较于DirectX的优越性 1. 与C语言紧密结合 OpenGL命令最初就是用C语言函数来进行描 ...

  7. SQLServer的Login迁移脚本

    背景:公司的数据由SQLServer2008 R2升级至SQLServer2012,并配置了AlwaysOn,本脚本用于将主节点的Login迁移至辅助节点. 1.在主节点执行以下脚本创建存储过程: U ...

  8. Unity3D——物体鼠标跟随转向

    int floorMask; float camRayLenth = 100f;//摄像机射线距离 void Truning() { Ray ray = Camera.main.ScreenPoint ...

  9. IIS7 配置

    1.配置应用程序池->高级设置 (1) .net Framework版本 :V4.0 (2)启用32位应用程序 :True (3)特定时间: 上班之前,下班之后 2.网站配置->高级设置 ...

  10. [C++] socket -8 [命名管道]

    ::命名管道不但能实现同一台机器上两个进程通信,还能在网络中不同机器上的两个进程之间的通信机制.与邮槽不同,命名管道是采用基于连接并且可靠的传输方式,所以命名管道传输数据只能一对一进行传输. /* 命 ...