<!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. thinkphp 3.2.3 连接sql server 2014 WAMPSERVER环境包

    安装 sqlsrv 扩展 首先  sql server 2014 安装没啥说的 链接信息自己设置 php 版本 :5.5.12 sqlsrv 驱动  微软提供了 3.0 和3.1 版本  3.0 对应 ...

  2. SQL之按两个字段分类汇总

    目的: 同时按"游戏代号"和"礼包名"分类汇总,然后获取下拉框的数据.  如下图所示: SQL查询 select game,giftname from qyg_ ...

  3. 使用HttpFileServer自建下载服务器

    如今单位办公离不开电脑,使用电脑离不开资料传输,举一个简单的例子吧,很多用户经常在电脑上编辑文件,这些文件往往打印出来给领导审阅,可是你电脑上没有打印机,这时你会想到通过优盘.网络硬盘.邮箱.QQ等方 ...

  4. Apache CXF实现WebService入门教程（附完整源码）

    Apache CXF实现WebService非常简单实用,只需要几步就可以实现一个简单的web service. 首先我们需要新建一个maven项目,在pom中添加依赖和jetty作为测试的web s ...

  5. virtualBox下面安装linux系统如何共享目录

    背景: 系统是win+virtualBox 在虚拟机中安装了linuxMint系统. 如何共享目录呢 第一步: 在虚拟机中安装增强功能 2,在virtualBox中设置共享目录 3,在linux下创建 ...

  6. [译]View components and Inject in ASP.NET MVC 6

    原文:http://www.asp.net/vnext/overview/aspnet-vnext/vc 介绍view components view components (VCs) 类似于part ...

  7. 【转载】Unity 优雅地管理资源，减少占用内存，优化游戏

    转自:星辰的<Unity3D占用内存太大的解决方法> 最近网友通过网站搜索Unity3D在手机及其他平台下占用内存太大. 这里写下关于Unity3D对于内存的管理与优化. Unity3D  ...

  8. Ruby基本语法规则

    1.Ruby常用数据类型 Numbers, Strings, Booleans my_num = 25 my_boollean = true (or false) my_string = " ...

  9. mysql索引优化

    mysql 索引优化 >mysql一次查询只能使用一个索引.如果要对多个字段使用索引,建立复合索引. >越小的数据类型通常更好:越小的数据类型通常在磁盘.内存和CPU缓存中都需要更少的空间 ...

  10. C#之LinQ数据库

    一:与LINQ有关的语言特性 1.隐式类型 (1)源起 在隐式类型出现之前, 我们在声明一个变量的时候, 总是要为一个变量指定他的类型 甚至在foreach一个集合的时候, 也要为遍历的集合的元素,指 ...