一直以来,<input type="file">上传文件标签默认样式都是让人不爽的,使用它多要给它整整容什么的,当然如果用ui插件还比较方便,不能就自己来操刀实践一下!

html:

 <a href="javascript:void(0);">
<input type="file" id="fileElem">
</a>

css:

  <style>
a{
width:180px;
height:100px;
overflow:hidden;
display:block;
text-decoration:none;
position:relative;
background:#ccc;
}
#fileElem{
position:absolute;
top:;
right:;
background:none;
margin:;
padding:;
cursor:pointer;
width:700px;
height:200px;
font-size:60px;/*这个设置很重要*/
filter:alpha(opacity=0);/*把上传控件的透明度设为0*/
-moz-opacity:;
opacity:;
}
</style>

视图效果:

然后可以自由改变大小,用图片覆盖,或者做其他的修饰

效果在ie,ff,谷歌,欧朋都是一样的,safari没测试。

html的文件控件<input type="file">样式的改变的更多相关文章

  1. 自定义样式 实现文件控件input[type='file']

    一般我们设计的上传按钮都是和整个页面风格相似的样式,不会使用html原生态的上传按钮,但是怎么既自定义自己的样式,又能使用file控件功能呢? 思路是这样的: 1.定义一个相对定位的DIV,按照整成步 ...

  2. 文件上传input type="file"样式美化

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. ASP.NET控件<ASP:Button /> html控件<input type="button">区别联系

    ASP.NET控件<ASP:Button />-------html控件<input type="button">杨中科是这么说的:asp和input是一样 ...

  4. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  5. 知识点:定义input type=file 样式的方法(转)

    ——“当我们想要用css美化表单的时候,有两个控件就会和前段人员作对,一个是是大名鼎鼎的select,另一个就是我现在要说说的 input type=file” 为什么要美化file控件?试想一下,别 ...

  6. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  7. input[type=file]样式更改以及图片上传预览

    以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...

  8. input[type=file] 样式美化,input上传按钮美化

    <style>.file { position: relative; display: inline-block; background: #D0EEFF; border: 1px sol ...

  9. CSS <input type="file">样式设置

    这是最终想要的效果~~~ 实现很简单,div设置背景图片,<input type="file"/>绝对定位上去再设置opacity:0(透明度为0 ) 直接上代码,希望 ...

随机推荐

  1. 《数据密集型应用系统设计》读书笔记-ch1可靠、可扩展与可维护的应用系统

    我们以Twitter为例,使用其2012年11月发布的数据.Twitter的两个典型业务操作是: - 发布tweet消息: 用户可以快速推送新消息到所有的关注者,平均大约4.6k request/se ...

  2. Access如何判断字符串从左边第一个数字为5

    步骤如下: 1.打开VBA(ALT+F11)2.右键模块=>插入=>模块3.粘贴以下代码: Public Function CutStr(chkStr As String) As Stri ...

  3. 配置vim插件遇到youcompleteme插件问题解决方案

    今天在Opensuse下配置vim 遇到两个问题 配置插件找到一个很好的博客.学到一些有用技巧 http://hahaya.github.io/2013/07/26/use-vundle.html 但 ...

  4. robots 小记

    简介 网站所有者使用/robots.txt文件向网站机器人提供有关其网站的说明;这称为 Robots Exclusion Protocol.它的工作原理是这样的:robot 想要访问一个网站URL,比 ...

  5. Software Architecture Pattern(Mark Richards)笔记

    软件架构模式 缺少规范架构的程序通常会变得紧耦合.脆弱.难以更改,缺少清晰的发展方向和愿景.这本小书用50多页介绍了常用的5种常见架构模式,相信不管是大牛还是萌新都会有所收获,特别是对我这种偏爱系统设 ...

  6. Python机器学习库sklearn的安装

    Python机器学习库sklearn的安装 scikit-learn是Python的一个开源机器学习模块,它建立在NumPy,SciPy和matplotlib模块之上能够为用户提供各种机器学习算法接口 ...

  7. Bash编程(5) Shell方法

    shell的方法在相同的进程内执行,与调用它的脚本一致.对于方法来说,脚本中的所有变量均可见,且不需要执行export.方法中可以创建局部变量,且不影响正在调用的脚本. 1. 定义语法 (1) Kor ...

  8. oracle 自动表分区

    Oracle 新功能自动分区: 实现代码: create table t_interval partition by range(created)//dba_objects 视图的一个字段 inter ...

  9. 管理nginx(采用信号的方式)

    启动:sbin/nginx 立即停止:sbin/nginx -s stop 平滑停止:sbin/nginx -s quit 重载配置:sbin/nginx -s reload(不会导致服务器关闭, 而 ...

  10. Lakeshore用户手册

    1.场景 场景是游戏的基本组成部分,开始界面,结束界面,每个关卡都是一个场景.游戏中基于游戏的情节,可以在各个场景间跳转. 2.精灵 精灵可以理解为图片的容器.如果需要在游戏场景中插入一个静态图片,那 ...