<!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. Python学习笔记 之 递归、二维数组顺时针旋转90°、正则表达式

    递归.二维数组顺时针旋转90°.正则表达式 1.   递归算法是一种直接或间接调用自身算法的过程. 特点: 递归就是在过程或函数里调用自身 明确的递归结束条件,即递归出口 简洁,但是不提倡 递归次数多 ...

  2. SQL查询为什么不推荐使用select count(*)

    select count(1). count(字段名) .count(*)  的区别

  3. Log4net中换行符

    在log4net节点中 <appender name="DebugLogFileAppender" type="log4net.Appender.FileAppen ...

  4. WinForm------SimpleButton去掉点击时的边框

    设置属性

  5. php桥接设计模式

    <?php //桥接模式 abstract class info{ protected $send=null; public function __construct($send){ $this ...

  6. .Net 中的反射(反射特性) - Part.3

    反射特性(Attribute) 可能很多人还不了解特性,所以我们先了解一下什么是特性.想想看如果有一个消息系统,它存在这样一个方法,用来将一则短消息发送给某人: // title: 标题:author ...

  7. Google Map API V3开发（3）

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  8. 3Struts2进阶----青软S2SH(笔记)

    关于上面这个红框里的问题,经过实际测试发现,struts2增加一个命名空间后,jsp页面里所引用的资源的路径,也需要增加一个"../", 于是,跟SpringMVC没啥区别了啊.. ...

  9. 错误 Metadata file 'C:\Common\bin\Debug\Common.dll' could not be found

    一个通用方法de类库/总是报这个错误/很明显就是没有成功生成程序集... 但是就是找不到哪里的错误!!!! 如果是代码写错的话,可能会直接提示在哪个文件中哪行代码写错了,然后dll生成不了,但是这个错 ...

  10. PHP cookie

    PHP Cookie cookie 常用于识别用户. Cookie 是什么? cookie 常用于识别用户.cookie 是一种服务器留在用户计算机上的小文件.每当同一台计算机通过浏览器请求页面时,这 ...