[k]自定义上传文件按钮样式
<!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]自定义上传文件按钮样式的更多相关文章
- 怎样用纯HTML和CSS更改默认的上传文件按钮样式
如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览 ...
- bootstrap改变上传文件按钮样式,并显示已上传文件名
参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...
- html中自定义上传文件的样式
<script> $(function(){ $("#avatsel1").click(function(){ $("input[type='file']&q ...
- el-upload自定义上传文件,并携带其余参数,且action不报错
用el-upload组件自定义上传按钮,并携带其余参数,且必传参数action 不报错 <template> <el-col :span="6" :mode=&q ...
- jQuery上传文件按钮美化
效果图如下: 思路: 1:打开文件设置为透明,外面包一层标签,给标签设置颜色背景,给人点击浏览其实是点击打开文件的错觉.(给外标签相对定位,打开文件标签绝对定位). 2:点击浏览后,选择了文件,就把文 ...
- 使用jQuery.FileUpload插件和服Backload组件自定义上传文件夹
在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? □ 在web.config中配置 1: <configuration> 2: <conf ...
- MVC文件上传05-使用客户端jQuery-File-Upload插件和服务端Backload组件自定义上传文件夹
在零配置情况下,文件的上传文件夹是根目录下的Files文件夹,如何自定义文件的上传文件夹呢? MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 MVC文 ...
- WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法
由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...
- php版本CKFinder3.4.4自定义上传文件位置
1.修改文件上传路径: 编辑ckfinder目录下config.php,70行设置为: 'baseUrl' => '/uploads/'.date('Ymd').'/'; 这样上 ...
随机推荐
- AutoMapper不用任何配置就可以从dynamic(动态)对象映射或映射到dynamic对象。
http://www.cnblogs.com/farb/p/4934476.html#pz
- yii2 小技巧
参考地址:http://www.cnblogs.com/sandea/p/5714830.html 1.不通过日志获取AR执行的原生SQL语句和打印变量数据 $query = User::find() ...
- Java并发编程核心方法与框架-Executors的使用
合理利用线程池能够带来三个好处 降低资源消耗.通过重复利用已创建的线程降低线程创建和销毁造成的消耗. 提高响应速度.当任务到达时,任务可以不需要等到线程创建就能立即执行. 提高线程的可管理性.线程是稀 ...
- MySQL索引之前缀索引和索引选择性
有时需要索引很长的字符列,它会使索引变大而且变慢.一个策略就是模拟哈希索引.但是有时这也不够好,那? 通常可以索引开始的几个字符,而不是全部值,以节约空间并得到好的性能.这使索引需要的空间变小,但是也 ...
- [C#基础]c#中的BeginInvoke和EndEndInvoke
摘要 异步这东西,真正用起来的时候,发现事情还是挺多的,最近在项目中用到了异步的知识,发现对它还是不了解,处理起来,走了不少弯路.觉得还是补一补还是很有必要的. MSDN原文地址:https://ms ...
- Kmeans算法的K值和聚类中心的确定
0 K-means算法简介 K-means是最为经典的基于划分的聚类方法,是十大经典数据挖掘算法之一. K-means算法的基本思想是:以空间中k个点为中心进行聚类,对最靠近他们的对象归类.通过迭代的 ...
- SQL笔记 - 解决CTE定位点类型和递归部分的类型不匹配
在CTE递归测试,也就是部门名称拼接的时候,遇到了小问题: 登时就迷糊了:不都是取的是Unit表中的同一个列,相加之后类型就变了么? 难道是因为,系统知道这是在进行递归运算,但又不确定递归的层次,以及 ...
- 2015年12月10日 spring初级知识讲解(二)最小化Spring XML配置 注解
序,随着Spring容器管理Bean数量增加,XML文件会越来越大,而且纯手工配置XML很繁琐,Spring和JAVA都提供了一些注解方式用以简化XML配置. 目录 一.自动装配(autowiring ...
- 关于360的META设置,强制使用极速模式
我的网站,为了使360浏览器打开时默认为极速模式,给用户良好的体验!避免网页由于细节而导致页面布局错乱~ <!DOCTYPE HTML> <html> <head> ...
- [译]Bundling and Minification
原文:http://www.asp.net/mvc/overview/performance/bundling-and-minification============================ ...