<!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. Ubuntu默认防火墙安装、启用、配置、端口、查看状态相关信息

    Ubuntu附带了一个相对iptables简单很多的防火墙 配置工具:ufw ufw防火墙 即uncomplicated firewall,不复杂的防火墙,繁琐部分的设置还是需要去到iptables ...

  2. 仿QQ大战—服务器的搭建（ServerSocket）

    ServerSocket(服务器): ServerSocket是JAVA中提供的用于建立服务器的类: 在客户/服务器通信模式中, 服务器端需要创建监听端口的 ServerSocket, ServerS ...

  3. LCIS

    传送门 http://bestcoder.hdu.edu.cn/contests/contest_chineseproblem.php?cid=726&pid=1003 分析:这道题依然是动态 ...

  4. Bzoj1597 [Usaco2008 Mar]土地购买

    Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 4005  Solved: 1460 Description 农夫John准备扩大他的农场,他正在考虑N ...

  5. 防DDOS攻击SHELL脚本

    最近一段时间服务器频繁遭到DDOS攻击,目前只能通过封IP来源来暂时解决.IP不源变化多端,光靠手工来添加简直是恶梦,想了个方法,用SHELL来做. 比较简单,但很实用:) 以下内容根据作者原文进行适 ...

  6. JavaScript把客户端时间转换为北京时间

    写在前面 写了一遍又一遍,网页老卡住,没保存下来,不写了. 时间转换代码 //获得北京时间 Date.prototype.getBJDate = function () { //获得当前运行环境时间 ...

  7. Html特殊字符表

    原始字符 entity 原始字符 entity " " & & ' ' < < > >     ¡ ¡ ¢ ¢ £ £ ¤ ¤ ¥ ¥ ¦ ...

  8. CodeForces 165E Compatible Numbers（位运算 + 好题）

    wo integers x and y are compatible, if the result of their bitwise "AND" equals zero, that ...

  9. Java开发的基础条件:

    ------------Java开发的基础条件:Java相关的基础+对编程的自己的理解+调试代码+自己的坚持 一定要谦逊,不人云亦云,不去妄言某一门语言或技术好或坏!不是哪门技术有问题,而是(不会用才 ...

  10. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...