<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. flex中DataGrid里使用itemRenderer后数据无法绑定到数据源的问题

    <?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="ht ...

  2. pad 横屏 cell不正常显示

    在iOS9中,适配iPad横屏的时候,我发现cell不能正常显示,其标题和线都不是从左边头部开始,而是在中间,accessoryType的图标也不再右边尾部,效果如下图 但是在iPhone中是正常的, ...

  3. wpa_supplicant 移植及 linux 命令行模式配置无线上网

    本文涉及内容为linux 命令行模式配置无线上网 及 wpa_supplicant 移植到开发板的过程,仅供参考. 1.源码下载 wpa_supplicant 源码下载地址 :http://hosta ...

  4. C++ foreach

    考虑下面的需求,对vector<int>中的每个元素加1,如何做? void add(int& lhs) // 注意:要修改主调方法中的数据,这里要使用引用 { lhs= lhs ...

  5. CodeForces 173B Chamber of Secrets spfa

    Chamber of Secrets 题目连接: http://codeforces.com/problemset/problem/173/B Description "The Chambe ...

  6. C++ 内存泄露处理方法 (转)

    1.可以显示内存泄露情况,但无法找到具体的文件位置写法 包含头文件#include <crtdbg.h> 然后在需要检测内存泄露的位置加上语句 _CrtDumpMemoryLeaks(); ...

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

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

  8. TP复习8

    ## ThinkPHP 3.1.2 视图#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.模板的使用 (重点) a.规则 模板文件夹下[TPL]/[分组 ...

  9. change netbeans look and feel

    change netbeans look and feel: 方法一: 下载地址:https://kenai.com/projects/nbsubstance/downloads/directory/ ...

  10. Java IO和Java NIO在文件拷贝上的性能差异分析

    1.  在JAVA传统的IO系统中,读取磁盘文件数据的过程如下: 以FileInputStream类为例,该类有一个read(byte b[])方法,byte b[]是我们要存储读取到用户空间的缓冲区 ...