<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>input上传按钮美化</title>

<style type="text/css">

/*样式一*/

.a-upload {

    padding: 4px 10px;

    height: 20px;

    line-height: 20px;

    position: relative;

    cursor: pointer;

    color: #;

    background: #fafafa;

    border: 1px solid #ddd;

    border-radius: 4px;

    overflow: hidden;

    display: inline-block;

    *display: inline;

    *zoom:

}

.a-upload  input {

    position: absolute;

    font-size: 100px;

    right: ;

    top: ;

    opacity: ;

    filter: alpha(opacity=);

    cursor: pointer

}

.a-upload:hover {

    color: #;

    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: ;

    line-height: 20px;

}

.file input {

    position: absolute;

    font-size: 100px;

    right: ;

    top: ;

    opacity: ;

}

.file:hover {

    background: #AADFFD;

    border-color: #78C3F3;

    color: #;

    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上传按钮美化的更多相关文章

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

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

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

    <style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...

  3. input美化上传按钮美化

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

  4. css 文件上传按钮美化

    转自:http://zixuephp.net/article-85.html 思路:在一个div里面添加一个图片用作按钮再添加一个input file 文件上传,把文件上传按钮设置透明度为0,绝对定位 ...

  5. input上传按钮的优化

    在使用input标签按钮的时候,<input type="file" value="" /> 显示很难看,怎么办? 使用label <li c ...

  6. input上传按钮 文字修改办法

    解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传. 具体代码: <style> #uploadImg{ font-size ...

  7. 使用ajax发送文件的三种方式及预览图片的方法,上传按钮美化

    后端代码 def upload(request): if request.method == "GET": return render(request,'upload.html') ...

  8. Input File 表单上传按钮美化

    HTML <div class="input-file-button"> 上传图片<input type="file" class=" ...

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

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

随机推荐

  1. cookie 和session 的区别详解

    这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...

  2. IE浏览器不能访问网页，google可以访问

    现象:google浏览器可以进行网络访问,ie不能访问 原因:代理服务修改了局域网配置脚本 解决: Internet选项---连接---局域网设置: 去除勾选 “使用自动配置脚本”

  3. mysql免安装使用（win7 64位系统）

    一.解压 二.以管理员身份运行cmd 三.cmd命令进入到解压后的mysql文件bin目录下 四.将mysql服务添加到windows服务中.cmd在bin目录下输入:mysqld -install  ...

  4. BZOJ1491: [NOI2007]社交网络

    传送门 最短路计数问题.因为数据量非常小($N \leq 100$),所以Floyd随便搞搞就行了. $f[i][j]$表示路径长度,$g[i][j]$表示最短路方案数. 先跑一遍裸的Floyd,然后 ...

  5. Linux快速体验

    目录结构: /:根目录,根目录下一般只存放子目录,不存放文件./bin: 存放可执行的二进制文件,如常用的命令ls. tar.mv. cat等./boot: 存放linux系统启动时需要的一些文件./ ...

  6. 第二轮冲刺-Runner站立会议09

    今天:将日历界面和主程序结合起来 明天:查看整个项目,调试是否有问题

  7. Java字节数组转按radix进制输出

    代码如下: public class Main_bytesToStr { public static void main(String[] args) throws IOException { // ...

  8. C++计算几何库

    http://www.cgal.org/ http://shapeop.org/

  9. javascript面向对象：继承、多态

    继承 js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属性),同时可扩展自己的成员,下面介绍几种js中实现继承的方式: 1,对象模仿:通过动态的改变 this 指针的指向,实现 ...

  10. IHttpModule生命周期

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...