<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. Spring MVC防止数据重复提交

    现实开发中表单重复提交的例子很多,就包括手上这个门户的项目也有这种应用场景,用的次数多,但是总结,这还是第一次. 一.基本原理 使用token,给所有的url加一个拦截器,在拦截器里面用java的UU ...

  2. Android Studio @Bind的用法,自动生成findViewById无需再实例化控件

    第一步:app 的build.gradle文件中添加 如下代码: compile 'com.jakewharton:butterknife:7.0.0' 点击Sync Now 同步下载第二步:安装插件 ...

  3. 使用 preferredStatusBarStyle 设置状态栏颜色

    iOS9之前,在plist文件中 插入一个新的key,名字为View controller-based status bar appearance,并将其值设置为NO. 然后敲入代码: [UIAppl ...

  4. C++ 名称空间

    在程序中,只使用 using namespace std; 而不使用其他的名称空间,如using namespace boost; 这样的好处有: 1.可以避免不同名称空间中的名称冲突: 2.可以很清 ...

  5. Viewport解决分辨率适配问题

    Viewport :   字面意思为视图窗口,在移动 web 开发中使用.表示将设备浏览器宽度虚拟成一个特定的值(或计算得出),这样利于移动 web 站点跨设备显示效果基本一致.   基本写法: &l ...

  6. 引入第三方库错误Undefined symbols for architecture i386: _OBJC_CLASS_$的解决方案

    引起标题上所导致的错误是因为你的第三方库没有放入到Compile Sources里面去. 需要到你项目的Targets>>Build Phases>>Compile Sourc ...

  7. 进程控制之exit函数

    进程有下面5种正常终止方式: (1)在main函数内执行return语句.这等效于调用exit. (2)调用exit函数.此函数有ISO C定义,其操作包括调用各终止处理程序(终止处理程序在调用ate ...

  8. BinaryWriter和BinaryReader用法

      C#的FileStream类提供了最原始的字节级上的文件读写功能,但我们习惯于对字符串操作,于是StreamWriter和 StreamReader类增强了FileStream,它让我们在字符串级 ...

  9. WIN7 下 Qt Creator 安装 QWT

    WIN7 下 Qt Creator 安装 QWT 环境:WIN7 +QT Creator2.6.2 1.下载QWT源代码 qwt-6.1-rc3.zip 2 编译QWT  open projects- ...

  10. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...