一直以来,<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. CDH集群安装配置(一)-集群规划和NAT网络配置

    三台物理机或者虚拟机. cdh1,cdh2,cdh3. 内存要求大于8GB,cdh1的物理磁盘要求多余50G. 每台虚拟机安装centos 7 系统.

  2. DataGridView绑定list的注意事项

    1.DataGridView数据绑定对比(DataTable与泛型List):       当DataGridView的DataSource是DataTable的时候,DataTable的数据改变时, ...

  3. gcc 常用命令

    gcc编译器 $ gcc -o XX.exe XXX.c ddd.c $ gcc -o XX.asm -S XXX.c  编译生成可执行文件,并执行程序,缺省的时候,gcc 编译出来的文件是a.out ...

  4. PIXI FlappyBird详解(9)

    本文为了学习及使用pixi参考该文,使用pixi实现 这个实方式跟玉兔太空类似, 这里介绍下实现步骤 1.创建舞台及应用大小根据实际去定义 2.创建背景素材,可以采取纹理图集,在前边有提过或是看官网了 ...

  5. day2-模块初识之路径问题

    sys需要调用my_test,但是不在同一目录 会出现如下错误 具体办法:1.将my_test.py放到文件夹下 附:sys.py 和my-test.py具体代码 enumerate 重点:浅复制(用 ...

  6. java实现多线程的4种方式

    1.继承Thread类 看jdk源码可以发现,Thread类其实是实现了Runnable接口的一个实例,继承Thread类后需要重写run方法并通过start方法启动线程. 继承Thread类耦合性太 ...

  7. centos 7编译安装apache

    1.安装工具和依赖包 yum install unzipyum -y install gcc gcc-c++ 2.创建软件安装目录mkdir /usr/local/{apr,apr-util,apr- ...

  8. selenium中等待元素的加载

    在实际使用中,有时会出现一个元素还没有加载出来,导致无法获取,此时需要selenium处理来等待一段时间,此时处理方法有以下几种: 1.最笨.最简单但是最不推荐的方式: Thread.sleep(ti ...

  9. hibernate抓取问题

    当使用xml配置类之间的关系时 ,例如 学生 班级,多对一关系 /** * 默认情况会发出2条SQL语句,一条取student,一条取Classroom,其实这只需要一条sql             ...

  10. TOJ 1836 Play on Words

    描述 Some of the secret doors contain a very interesting word puzzle. The team of archaeologists has t ...