最近碰到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. 咏南IOCP中间件

    咏南IOCP中间件 特大好消息,咏南中间件系列新增加——咏南IOCP中间件.咏南IOCP中间件完全兼容咏南DATASNAP中间件的远程方法接口. 中间件DELPHI7~DELPHI XE10.1.1都 ...

  2. M1事后分析汇报总结

    学霸网站项目Postmortem结果 设想和目标 1.       我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 学霸网站为计算机学习提供了一个网上基地,在这里你 ...

  3. CSS透明属性详解

    .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ...

  4. [Shell]正则表达式与通配符

    ----------------------------------------------------------------------------------------- 正则表达式与通配符: ...

  5. picurl

    from lxml import etreeimport requestsdef getHtml(html): novelcontent = requests.get(html).content re ...

  6. android 的touch event分析

    android中的事件类型分为按键事件和屏幕触摸事件,Touch事件是屏幕触摸事件的基础事件,有必要对它进行深入的了解.   一个最简单的屏幕触摸动作触发了一系列Touch事件:ACTION_DOWN ...

  7. 文件过滤器 filter

    OpenFileDialog对话框的Filter属性说明: 首先说明一个示例,分析一下Filter属性的构成:“ Excel文件|*.xls ”,前面的“Excel文件”成为标签,是一个可读的字符串, ...

  8. Python3学习(3)-高级篇

    Python3学习(1)-基础篇 Python3学习(2)-中级篇 Python3学习(3)-高级篇 文件读写 源文件test.txt line1 line2 line3 读取文件内容 f = ope ...

  9. [Xamarin] 關於SQLite 的操作 （转帖）

    我們聊一下常用的東西,SQLite,這東西很常用到,當再寫手機APP的時候,有時候會在Client 做 cache或是做一些資料的管理都很必須會用到,我們來看看今天的範例 建立SQL Lite 資料庫 ...

  10. 冲刺阶段 day5

    day5 项目进展 今天我们组的成员聚在一起进行了讨论,首先我们继续编写了学生管理这部分的代码,然后负责数据库的同学完成了数据库的部分,最后进行了学生管理这部分的代码复审 存在问题 因为代码不是一天之 ...