自定义input file 属性
<label class="input">
<input title="浏览文件" type="file" />浏览…
</label>
<style type="text/css">
.input{display: inline-block;
width: 140px;
height: 50px;
line-height: 50px;
text-align: center;
overflow: hidden;
position: relative;
background-color: #00a1cb;
color: #fafafa;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
border-radius: 1px;
transition:background .3s;
-webkit-transition:background .3s}/*自定义外框样式*/
.input:hover{background-color: #00b5e5}/*鼠标经过样式*/
.input input{opacity: 0;filter:alpha(opacity=0);
font-size: 100px;
position: absolute;
top: 0;
right: 0} /*隐藏默认控件样式*/
</style>
自定义input file 属性的更多相关文章
- 自定义input file样式
自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...
- input:file属性
1.accept 只能选择png和gif图片 <input id="fileId1" type="file" accept="image/png ...
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
- HTML5的 input:file上传类型控制
一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...
- 在HTML5的 input:file 上传文件类型控制 遇到的问题
1.input:file 属性的介绍 先瞅代码吧 <form> <input type="file" name="pic" accept=& ...
- HTML5的 input:file上传 以及 类型控制
以HTML5的文件上传API 如下demo代码在.html文件打开即可: !DOCTYPE html> <html lang="zh_cn"> <head& ...
- HTML5: input:file上传类型控制
ylbtech-HTML5: input:file上传类型控制 1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...
- HTML5的 input:file上传类型控制(转载)
http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...
- 在webapp上使用input:file, 指定capture属性调用默许相机,摄像,录音功能
## 在webapp上使用input:file, 指定capture属性调用默认相机,摄像,录音功能 在iOS6下开发webapp,使用inputz之file,很有用 <input type=& ...
随机推荐
- ActionBar PopuMenu
PopupMenu popupmenu可以非常方便得实现在指定view下弹出一个菜单,实现类似ActionBar中的效果. public void showPopupMenu(View view){ ...
- 快速找到跟踪其他session产生的trc文件
掌握该技术最根本的是需要搞清楚session跟踪文件存放的路径和生成跟踪文件的命名规则,不然,在已经存在成全上万trc文件的生产环境中,要想快速正确的找到跟踪其他SESSION产生的trc文件就如大海 ...
- Linux device tree 简要笔记
第一.DTS简介 在嵌入式设备上,可能有不同的主板---它们之间差异表现在主板资源不尽相同,比如I2C.SPI.GPIO等接口定义有差别,或者是Timer不同,等等.于是这就产生了BSP的一个 ...
- silverlight调用MVC WebApi方法
1.创建ASP.NET MVC4 Web应用程序,选择WebAPI模板 2.添加silverlight项目 3.新建一个数据模型类,代码如下: using System; using System.C ...
- PostgreSQL下,对汉字按拼音排序
参考学习此文: http://blog.163.com/digoal@126/blog/static/163877040201173003547236/ 建库 postgres=# \l List o ...
- icacls备份与还原ACL列表(NTFS权限)--Robocopy
icacls c:\windows\* /save AclFile /T- 将 c:\windows 及其子目录下所有文件的 ACL 保存到 AclFile. icacls c:\windows\ / ...
- win8 企业版 安装 .net2.0 .net 3.5
Windows 8 默认集成 .Net Framework 4.5,因此运行一些基于3.5或以前版本的程序时会弹出这个提示. 2012-3-2 15:24 上传 下载附件 (23.91 KB) 这 ...
- Android自定义图形,图形的拼接、叠加、相容
直接上Xfermode子类: AvoidXfermode 指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图). PixelXorXfermode 当覆盖已有的颜色时,应用一 ...
- 【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
- 【JavaScript】jQuery Ajax 实例 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...