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

<!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. js中修改标签的hidden属性

    hidden属性在html5中,只要存在,就是隐藏效果,而不论值为多少 要显示元素,要删除hidden属性,而不是设置为false <script type="text/javascr ...

  2. linux学习之一些琐碎知识点

    一.python 问:django中project和app之间到底有什么不同? 答:他们的区别就是一个是配置,另一个是代码. 一个project包含很多个django app以及对它们的配置.技术上, ...

  3. MySQL 5.6 my.cnf 模版

    [client] port = socket = /var/run/mysqld/mysqld.sock [mysqld_safe] thp-setting=never socket = /var/r ...

  4. Java for LintCode 颜色分类

    给定一个包含红,白,蓝且长度为n的数组,将数组元素进行分类使相同颜色的元素相邻,并按照红.白.蓝的顺序进行排序. 我们可以使用整数0,1和2分别代表红,白,蓝. 解题思路: Java for Leet ...

  5. HDU 1823 Luck and Love（二维线段树）

    之前只知道这个东西的大概概念,没具体去写,最近呵呵,今补上. 二维线段树 -- 点更段查 #include <cstdio> #include <cstring> #inclu ...

  6. Valentine's Day Round 1001.Ferries Wheel（hdu 5174）解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5174 题目意思:给出 n 个人坐的缆车值,假设有 k 个缆车,缆车值 A[i] 需要满足:A[i−1] ...

  7. BestCoder22 1002.NPY and arithmetic progression(hdu 5143) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5143 题目意思:给出 1, 2, 3, 4 的数量,分别为a1, a2, a3, a4,问是否在每个数 ...

  8. WCF错误：413 Request Entity Too Large

    在我们用WCF传输数据的时候,如果启用默认配置,传输的数据量过大,经常会出这个错误. WCF包含服务端与客户端,所以这个错误可能出现在服务端返回数据给客户端,或客户端传数据给服务端时. 1. 服务端返 ...

  9. jquery $(document).ready() 与window.onload的异同

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的.   1.执行时间     ...

  10. HTML标记之a标签

    一.a标签的语法 <a href=”链接目标地址” title=”注释” target=”打开链接窗口的形式”>链接显示内容</a> target值: _blank在新窗口中打 ...