<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 属性的更多相关文章

  1. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  2. input:file属性

    1.accept 只能选择png和gif图片 <input id="fileId1" type="file" accept="image/png ...

  3. 巧妙利用label标签实现input file上传文件自定义样式

    提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可    但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同   我们往 ...

  4. HTML5的 input:file上传类型控制

    一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表. multiple:是否可以选择多个文 ...

  5. 在HTML5的 input:file 上传文件类型控制 遇到的问题

    1.input:file 属性的介绍  先瞅代码吧 <form> <input type="file" name="pic" accept=& ...

  6. HTML5的 input:file上传 以及 类型控制

    以HTML5的文件上传API 如下demo代码在.html文件打开即可: !DOCTYPE html> <html lang="zh_cn"> <head& ...

  7. HTML5: input:file上传类型控制

    ylbtech-HTML5: input:file上传类型控制   1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...

  8. HTML5的 input:file上传类型控制(转载)

    http://www.haorooms.com/post/input_file_leixing HTML5的 input:file上传类型控制 2014年8月29日 66352次浏览 一.input: ...

  9. 在webapp上使用input:file, 指定capture属性调用默许相机,摄像,录音功能

    ## 在webapp上使用input:file, 指定capture属性调用默认相机,摄像,录音功能 在iOS6下开发webapp,使用inputz之file,很有用 <input type=& ...

随机推荐

  1. 前端相关的seo技术

    相信大部分的前端开发人员应该深知seo对我们的重要性,所以个人认为平台在开发初期就应该要考虑好seo优化的问题,不然做出来的页面,就算是效果很炫,功能很强,但是对搜索引擎也不友善.如果等到成熟时期再来 ...

  2. Why isn't there a SendThreadMessage function?

    Here's an interesting customer question: Windows has PostMessage and SendMessage. It also has PostTh ...

  3. 工作一直没有进步怎么办?试试PDCA法则吧!

    许多人在工作或者学习的时候,总是会发现自己过了一段时间以后,全然没有不论什么进步.或者进步很之少. 而对于每个渴望让自己变得更好的人来说.是一件很令人苦恼的事情,今天我们就来谈一下工作和学习上,可实现 ...

  4. ASP.net中GridView中增加一行记录并默认显示为编辑状态

    //添加 protected void Button1_Click(object sender, EventArgs e) { DataSet ds = (DataSet)pa.GetDataSet( ...

  5. GEOS库 介绍 (转)

    http://wiki.woodpecker.org.cn/moin/lilin/geos-introduce 介绍 GEOS是一个集合形状的拓扑关系操作实用库(可能这么说不太准确),简单得说,就是判 ...

  6. accept函数

    accept()函数 系统调用 accept() 会有点古怪的地方的! 你能够想象发生 这种事情:有人从非常远的地方通过一个你在侦听 (listen()) 的port连接 (connect()) 到你 ...

  7. Android 实现自动接听和挂断电话功能

    添加权限 <uses-permission android:name="android.permission.CALL_PHONE"/> <uses-permis ...

  8. c#(asp.net)杂谈笔记

    1.js解析json格式的时间 //转换json格式时间的方法 如Date(1340239979000)转换为正常 function ConvertJSONDateToJSDateObject(JSO ...

  9. apache2.2 虚拟主机配置

    一.改动httpd.conf 打开appserv的安装文件夹,找到httpd.conf文件,分别去掉以下两行文字前面的#号. #LoadModule vhost_alias_module module ...

  10. 之前的Android项目报错,新建Android项目报错,代码中找不到错误解决方案

    打开一年前的东西,结果发现里面的android项目全部有个红叉,也找不到错误.新建一个项目也报错,首先确定自己的环境应该没问题,然后通过查看网上的资料,发现可能是debug的keystore到期啦. ...