<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. 11.聚合(Aggregation)

    聚合关系是关联关系的一种特例,它体现的是整体与部分的关系,即has-a的关系,此时整体与部分之间是可分离的,它们可以具有各自的生命周期.比如计算机与CPU.公司与员工的关系等.表现在代码层面,和关联关 ...

  2. 集成iscroll 下拉加载更多 jquery插件

    一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...

  3. 自行架设DNS的操作步骤及相关说明

    关于什么是DNS及相关的名词及说明,请看 http://www.wdlinux.cn/bbs/viewthread.php?tid=1081&highlight=dns这里,只是说明,在wdd ...

  4. TAxThread - Inter thread message based communication - Delphi

    http://www.cybletter.com/index.php?id=3 http://www.cybletter.com/index.php?id=30 Source Code http:// ...

  5. codechef Arranging Cup-cakes题解

    Arranging Cup-cakes Our Chef is catering for a big corporate office party and is busy preparing diff ...

  6. DropdownList绑定的两种方法

    动态绑定方法一:动态绑定数据库中的字段. SqlConnection conn = UtilitySqlClass.OperateDataBase.ReturnConn();string strSQL ...

  7. Codeforces Round #313 (Div. 1) B. Equivalent Strings DFS暴力

    B. Equivalent Strings Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/559 ...

  8. xmf 翻译

    避免在详细信息视图的确认对话框显示? https://documentation.devexpress.com/#Xaf/CustomDocument3160 我如何获得从登录窗口应用程序的数据库? ...

  9. JavaWeb学习总结

    http://www.cnblogs.com/xdp-gacl/tag/JavaWeb%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93/ http://www.cnblogs. ...

  10. git-ssh 配置和使用

    1.设置Git的user name和email:(如果是第一次的话) $ git config --global user.name "humingx" $ git config ...