<!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. AutoMapper不用任何配置就可以从dynamic(动态)对象映射或映射到dynamic对象。

    http://www.cnblogs.com/farb/p/4934476.html#pz

  2. yii2 小技巧

    参考地址:http://www.cnblogs.com/sandea/p/5714830.html 1.不通过日志获取AR执行的原生SQL语句和打印变量数据 $query = User::find() ...

  3. Java并发编程核心方法与框架-Executors的使用

    合理利用线程池能够带来三个好处 降低资源消耗.通过重复利用已创建的线程降低线程创建和销毁造成的消耗. 提高响应速度.当任务到达时,任务可以不需要等到线程创建就能立即执行. 提高线程的可管理性.线程是稀 ...

  4. MySQL索引之前缀索引和索引选择性

    有时需要索引很长的字符列,它会使索引变大而且变慢.一个策略就是模拟哈希索引.但是有时这也不够好,那? 通常可以索引开始的几个字符,而不是全部值,以节约空间并得到好的性能.这使索引需要的空间变小,但是也 ...

  5. [C#基础]c#中的BeginInvoke和EndEndInvoke

    摘要 异步这东西,真正用起来的时候,发现事情还是挺多的,最近在项目中用到了异步的知识,发现对它还是不了解,处理起来,走了不少弯路.觉得还是补一补还是很有必要的. MSDN原文地址:https://ms ...

  6. Kmeans算法的K值和聚类中心的确定

    0 K-means算法简介 K-means是最为经典的基于划分的聚类方法,是十大经典数据挖掘算法之一. K-means算法的基本思想是:以空间中k个点为中心进行聚类,对最靠近他们的对象归类.通过迭代的 ...

  7. SQL笔记 - 解决CTE定位点类型和递归部分的类型不匹配

    在CTE递归测试,也就是部门名称拼接的时候,遇到了小问题: 登时就迷糊了:不都是取的是Unit表中的同一个列,相加之后类型就变了么? 难道是因为,系统知道这是在进行递归运算,但又不确定递归的层次,以及 ...

  8. 2015年12月10日 spring初级知识讲解(二)最小化Spring XML配置 注解

    序,随着Spring容器管理Bean数量增加,XML文件会越来越大,而且纯手工配置XML很繁琐,Spring和JAVA都提供了一些注解方式用以简化XML配置. 目录 一.自动装配(autowiring ...

  9. 关于360的META设置,强制使用极速模式

    我的网站,为了使360浏览器打开时默认为极速模式,给用户良好的体验!避免网页由于细节而导致页面布局错乱~ <!DOCTYPE HTML> <html> <head> ...

  10. [译]Bundling and Minification

    原文:http://www.asp.net/mvc/overview/performance/bundling-and-minification============================ ...