最近碰到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. 10 个强大的开源 Web 流量分析工具（转帖）

    Web 流量分析工具多不胜数,从 WebTrends 这样专业而昂贵的,到 Google Analytics 这样强大而免费的,从需要在服务器端单独部署的,到可以从前端集成的,不一而足.本文收集并介绍 ...

  2. 【java】：解析xml

    ==========================================xml文件<?xml version="1.0" encoding="GB231 ...

  3. 批量导入Excel存在的问题及解决方案

    许多传统的做法,导入excel就是将excel上传到服务器的某个文件夹里如upload,之后再次读取,导入系统.这边就存在一些问题: 1.服务器需要安装Office,用于读取Excel文件. 2.系统 ...

  4. sublime构建执行go程序真爽

    1.安装gosublime插件 2.直接在sublime下调试运行共程序,不用去cmd了: 选择编译系统,编译,出现下面的模拟命令行,直接执行go的命令即可,比如go run process.go,结 ...

  5. css样式注意

    CSS3 font-face定义的字体使用时有时候用引号,有时候不用,很奇怪,如 @font-face{ font-family: Roboto-Black; src: url('../package ...

  6. JS-定时器管理实例

    /** * Created by 12461 on 2016/11/6. */window.onload = function () { var oBtn1 = document.getElement ...

  7. css3 transform的基本用法和介绍

    <style>/* 最简单的一个transition动画 .box{width:100px;height:100px;border:1px solid;background:green;- ...

  8. Static Constructors

    A static constructor is used to initialize any static data, or to perform a particular action that n ...

  9. IPD模式下开展敏捷开发的一些问题汇总

    1.      我们现在普遍用的是老系统情况下,什么时候把软件和硬件在敏捷项目里面集成? 答:有两种场景:第一种场景是把软件分几个迭代,最后把软件和硬件一起集成:第二种场景是更好的一种场景,每几个迭代 ...

  10. 不能运行，：framework not found SenTestingKit

    1. 真机调试,提示 ld: framework not found SenTestingKit $(DEVELOPER_LIBRARY_DIR)/Frameworks