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

<!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. Java使用for循环打印乘法口诀（正倒左右三角形）

    代码1: public void test1(){ for(int i = 1; i < 10 ; i ++){ for(int k = 1; k < i ; k ++){ System. ...

  2. Unity全屏模糊

    先上效果,左边模糊 其实用的是Unity Stard Effect里的资源,一个脚本一个shader //脚本代码 using UnityEngine; using System.Collection ...

  3. ios UITextView 计算文字内容大小

    先设置好 textView的内容文字,再调用以下代码,就能够得到文字内容的size,其中参数表示最大的size的尺寸,通常,高度应该不限制,宽度是控件的宽度. let newSize = statem ...

  4. 添加或修改ssh服务的端口

    通常ssh远程登录的默认端口是22,这个端口一般是可以更改或者添加的,配置文件位置在:/etc/ssh/sshd_config通过编辑文件可以修改sshd服务的相关配置,以下新增端口2223,即除了2 ...

  5. Linux基础命令总结

    1.pwd  查看当前工作目录 2.ls [目录] 列出指定目录下的所有文件,使用 ls -l 或者 ll 列出文件详细列表包括权限.大小等文件默认大小以字节B为单位,目录大小为4096B  ls - ...

  6. 原：[eclipse启动错误] JVM terminated.Exit code=2

    启动eclipse的时候忽然出现以下错误: 解决方案: 删除环境变量PATH或者Path中的 C:\ProgramData\Oracle\Java\javapath

  7. [第三方]SDWebImage获取网络图片控件的用法

    #import "UIImageView+WebCache.h" @interface WeatherViewController ()<UISearchBarDelegat ...

  8. 【leetcode】Remove Element （easy）

    Given an array and a value, remove all instances of that value in place and return the new length. T ...

  9. asp.net 图片下载

    string fileName = "123.jpg";//图片名字                    string filePath = Server.MapPath(&qu ...

  10. September 27th 2016 Week 40th Tuesday

    Friends are lost by calling too often and calling seldom. 交往过密过疏,都会失去朋友. Please mind your own busine ...