主要是定位和不透明度来实现：

<!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="">点击这里上传文件

</a>

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

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

</a>

</body>

</html>

input按钮上传按钮样式的更多相关文章

  1. input美化上传按钮美化

    今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...

  2. 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。

    一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...

  3. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

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

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

  5. 上传按钮样式优化 <input type="file" />

    <html><head><title>上传按钮样式优化</title> <style>.form-element-file-wapper { ...

  6. input上传按钮美化

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

  7. 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法

    (uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...

  8. 一个漂亮的上传按钮input[type=file]

    ;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...

  9. CSS自定义文件上传按钮样式，兼容主流浏览器

    解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.​1.图片​​2. [代码][HTML]代码 <div class="b ...

随机推荐

  1. MFC 对话框添加菜单

    1.在Resource View 里右击菜单里选择Add Resource,选择menu,添加一个IDR_MENU1的菜单.在编辑器编辑菜单,添加菜单项,命名各个菜单项的ID. 2.在所要添加菜单的对 ...

  2. Pooled Allocation池式分配实例——Keil 内存管理

    最近翻看Kei安装目录,无意中发现C51\LIB下的几个.C文件: CALLOC.CFREE.CINIT_MEM.CMALLOC.CREALLOC.C 看到 MALLOC.C 和 FREE.C 想到可 ...

  3. Python: 安装BeautifulSoup4

    python3.4.3 安装BeautifulSoup4: 使用pip install 安装: 在命令行cmd之后输入,pip install BeautifulSoup4 BeautifulSoup ...

  4. oracle简历自增序列(转)

    步骤:1.创建序列   2.创建触发器. 语法解析:create sequence TB_CODE_SEQUENCEminvalue 1maxvalue 99999999999999999999999 ...

  5. 虚拟机中的centos在nat模式下连不上外网

    这两天需要配置ftp服务器,可是虚拟机在nat模式下死活连不上外网,主机能够通过该ssh与虚拟机进行连接,虚拟机也能ping同一网段主机的IP地址,但就是ping不通外网, 开始我是这样配置的: 主机 ...

  6. iOS开发MAC下配置svn

    版本控制对于团队合作显得尤为重要,那么如何在iOS开发中进行版本控制呢?在今天的博客中将会介绍如何在MAC下配置SVN服务器,如何导入我们的工程,如何在Xcode中进行工程的checkOut和Comm ...

  7. ios block中引用self

    __block __weak typeof(self) tmpSelf = self; ^(){ tmpSelf...... }

  8. September 29th 2016 Week 40th Thursday

    Prosperity discovers vice, adversity virtue. 得意时露瑕疵,逆境中见品质. I wish I would have someone like you, fr ...

  9. 关于Visual Studio 2013 编译 multi-byte character set MFC程序出现 MSB8031 错误的解决办法

    转自:http://blog.csdn.net/xiaochunzao/article/details/16987703 Visual Studio 2013 编译旧的 multi-byte char ...

  10. XMPP框架下微信项目总结（5）花名册获取(好友列表)

    ---->概念 ---->添加花名册 ps:添加花名册,启动: 客户端发送请求到服务器获取好友列表信息,同时在项目中创建数据表,并保存好友列表到数据表中. ---->获取服务器保存好 ...