<!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. hihoCoder 后缀数组 重复旋律

    #1403 : 后缀数组一·重复旋律 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成 ...

  2. jQuery datatables

    jQuery datatables 属性,用例 参考:http://datatables.club/example/ http://blog.csdn.net/mickey_miki/article/ ...

  3. RabbitMQ Lazy Queue 延迟加载

    Lazy Queue 在著名的单例设计模式中就有懒汉式的实现方式,也就是只有在你需要的时候我才去加载. 这让博主想到了以前上学的时候,每到了假期的假期作业,在假期的时候是从来不做的.只有在快开学老师要 ...

  4. Architectural Model - SNMP Tutorial

    30.3 Architectural Model Despite the potential disadvantages, having TCP/IP management software oper ...

  5. 优化Table View

    优化Table View Table view需要有很好的滚动性能,不然用户会在滚动过程中发现动画的瑕疵. 为了保证table view平滑滚动,确保你采取了以下的措施: 正确使用`reuseIden ...

  6. 创建一个自定义颜色IRgbColor

    后续文章需要用到,很简单的一个小函数 /// <summary> /// 自定义颜色 /// </summary> /// <param name="r&quo ...

  7. 多光谱图像数据库, Multispectral images databses

    1. https://scien.stanford.edu/index.php/hyperspectral-image-data/ 2. http://www.cs.columbia.edu/CAVE ...

  8. JAX-WS服务端及客户端

    一.概述 Java API for XML Web Services (JAX-WS)是Java程序设计语言一个用来创建Web服务的API. 在服务器端,用户只需要通过Java语言定义远程调用所需要实 ...

  9. POJ 2478 Farey Sequence

     名字是法雷数列其实是欧拉phi函数              Farey Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  10. 【poj2096】Collecting Bugs

    题目描述 Ivan is fond of collecting. Unlike other people who collect post stamps, coins or other materia ...