<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>input type=file 样式自定义</title>
 <style>
 .a_wrap{
     height:20px;padding:5px 10px;overflow:hidden;  /*盒模型*/
     background:#eee;border:1px solid #ddd;color:#333;border-radius:5px;text-decoration:none;  /*伪上传按钮样式*/
     position:relative;  /*父元素定位*/
     display:inline-block;  /*必要*/
 }
 .a_wrap #upload{
     font-size:100px;  /*撑开上传按钮*/
     position:absolute;top:0;right:0;   /*子元素定位*/
     opacity:0;filter:alpha(opacity=0);  /*实际的上传按钮隐藏*/
 }
 .a_wrap:hover{  /*悬浮样式*/
     text-decoration:underline;
     border:1px solid #aaa;
 }
 </style>
 </head>

 <body>
 <h2>input type=file 样式自定义</h2>
 <form action="">
     <a href="javascript:;" class="a_wrap">
         <input type="file" name="upload" id="upload">点击这里上传文件
     </a>
 </form>
 <div style="margin-top:30px"><strong>总结：</strong>兼容到IE7+,Firefox,Chrome</div>
 </body>
 </html>

[k]自定义上传文件按钮样式的更多相关文章

  1. 怎样用纯HTML和CSS更改默认的上传文件按钮样式

    如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览 ...

  2. bootstrap改变上传文件按钮样式，并显示已上传文件名

    参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...

  3. html中自定义上传文件的样式

    <script> $(function(){ $("#avatsel1").click(function(){ $("input[type='file']&q ...

  4. el-upload自定义上传文件，并携带其余参数，且action不报错

    用el-upload组件自定义上传按钮,并携带其余参数,且必传参数action 不报错 <template> <el-col :span="6" :mode=&q ...

  5. jQuery上传文件按钮美化

    效果图如下: 思路: 1:打开文件设置为透明,外面包一层标签,给标签设置颜色背景,给人点击浏览其实是点击打开文件的错觉.(给外标签相对定位,打开文件标签绝对定位). 2:点击浏览后,选择了文件,就把文 ...

  6. 使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹

    在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? □ 在web.config中配置 1: <configuration> 2: <conf ...

  7. MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹

    在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小  MVC文 ...

  8. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

  9. php版本CKFinder3.4.4自定义上传文件位置

    1.修改文件上传路径: 编辑ckfinder目录下config.php,70行设置为:    'baseUrl'      => '/uploads/'.date('Ymd').'/'; 这样上 ...

随机推荐

  1. Effective Objective-C 2.0 — 第10条：在既有类中使用关联对象存放自定义数据

    可以通过“关联对象”机制来把两个对象连起来 定义关联对象时可指定内存管理语义,用以模仿定义属性时所采用的“拥有关系”与“非拥有关系” 只有在其他做法不可行时才应选用关联对象,因为这种做法通常会引入难于 ...

  2. C-函数与内存剖析

    功能,封装,调用 形参:定义函数时函数名后面中的参数,形式参数 实参:调用函数时传入的具体数据 return作用:1退出函数 2返回一个具体数值给调用者 返回值: 如果不明确声明返回值类型,默认就是i ...

  3. Servlet的配置

    让 Servlet 能响应用户请求,必须将 Servlet 配置在 Web 应用中. Servlet 3.0 中有两中配置方式:        1. 在 Servlet 类中使用 @WebServle ...

  4. C语言中的EOF和回车不一样

    经常我们碰到这样一个C语言问题,例如: 输入一个组整数,按照从小到大排序后输出结果 输入:  1 7 9 2 4 输出:  1 2 4 7 9 这里要用C语言读入一段数的话,如果用 int array ...

  5. oracle 中的trunc()函数及加一个月，一天，一小时，一分钟，一秒钟方法

    返回处理后的数据,不同于round()(对数值进行四舍五入处理),该函数不对指定小数前或后的数值部分进行舍入处理. 语法:trunc(number[,decimals]) 其中,number为待做处理 ...

  6. clang

    1.安装 clang 可以从官网下载,如果是CentOS 6 系统,也可以在 /etc/yum.repos.d/ 目录下增加一个 epel.repo 文件,内容如下: [epel] name=Extr ...

  7. PHP CLI下接受参数的几种方法

    PHP CLI(命令行模式下)接受参数有多种方法: (1)使用$argv接受参数 <?php //变量仅在 register_argc_argv 打开时可用. print_r($argc); / ...

  8. JavaScript数组属性与方法

    Array 对象属性 属性 描述 constructor 返回对创建此对象的数组函数的引用. length 设置或返回数组中元素的数目. prototype 使您有能力向对象添加属性和方法. Arra ...

  9. R中的name命名系列函数总结

    本文原创,转载请注明出处,本人Q1273314690 R中关于给行列赋名称的函数有 dimnames,names,rowname,colname,row.names 这五个函数,初学的时候往往分不清楚 ...

  10. python文件I/O（转）

    Python 文件I/O 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你 ...