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

<!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. Linux下安装gcc和g++

    以CentOS为例,安装后是没有C语言和C++编译环境的,需要手动安装,最简单的是用yum的方式安装,过程如下: 1.安装gcc yum install gcc 询问是否,按y键回车即可,或者 yum ...

  2. ACM/ICPC 之 四道MST-Kruskal解法-练习题(POJ1251-POJ1287-POJ2031-POJ2421)

    由于题目简单,部分题意写在代码中(简单题就应该多练英文...),且较少给注释,需要注意的地方会写在代码中,虽然四个题意各有千秋,但万变不离其宗,细细思考一番会发现四道题都属于很直接的最小生成树问题,由 ...

  3. Python 之 【markdown 模块的学习】

    摘要: markdown工具,可以将txt转化成html格式.这一类工具的作用是将按一定格式写成的可读性强的文本文件转化为结构化的标准xhtml或html.Linux 下面也有markdown: zh ...

  4. MAC OS X 常用通用快捷键

    注:由于使用的是Windows键盘,习惯了Ctrl + c/v复制粘贴,所以修改了修饰键,Command(⌘)键和Control(^)键互换,以下的Ctrl键均为Command键,对应键盘上的实际左C ...

  5. Match:Cyclic Nacklace(KMP的next数组的高级应用)(HDU 3746)

    串珠子 题目大意:给定一个字串,要你找到如果要使之成为循环串,在末尾需要的最小的字数(只能添加字符,不能删减字符) 首先联动一下之前做过的动态规划问题POJ 3280,当然了3280这一题是用的LD, ...

  6. codeforces 496A. Minimum Difficulty 解题报告

    题目链接:http://codeforces.com/contest/496/problem/A 题目意思:给出有 n 个数的序列,然后通过删除除了第一个数和最后一个数的任意一个位置的数,求出删除这个 ...

  7. 【leetcode】Combinations (middle)

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For exampl ...

  8. 【python】类中的super().__init__()

    来源:百度知道 python中的super( test, self).__init__()是什么意思? 首先找到test的父类(比如是类A),然后把类test的对象self转换为类A的对象,然后&qu ...

  9. XStream xml to bean

    <!-- pom.xml --> <dependency> <groupId>com.thoughtworks.xstream</groupId> &l ...

  10. Eclipse启动时出现错误 An internal error occurred during: “Updating indexes”

    在Eclipse的workspace下有个.metadata文件夹,Eclipse出现异常的log文件就在这个目录下. 最近出现了这样的错误: 查看日志文件发现:     !ENTRY org.ecl ...