一直以来,<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. C#串口通讯中常用的16进制的字节转换

    1.对于通讯协议的十六进制数值进行简单转换 //二进制转十进制Console.WriteLine("二进制 111101 的十进制表示: "+Convert.ToInt32(&qu ...

  2. c# 水晶报表使用说明

    水晶报表介绍 水晶报表是 vs 早期版本自带的一款报表控件.vs2017不自带水晶报表,需要自行安装.虽然水晶报表是收费控件,但是微软已经付过钱了,所以vs自带的水晶报表可以直接使用. 如果项目是 . ...

  3. CSAPP阅读笔记-汇编语言初探(算术和逻辑操作类指令)-来自第三章3.5的笔记-P128-P135

    1.算术和逻辑操作类指令分四类:加载有效地址,一元操作,二元操作和移位,如下: 2. leaq指令,类似mov指令,它左侧的数看似是给出一个地址,在内存中从给定的地址取操作数,传给右边的目的地.但其实 ...

  4. 剑指offer等算法总结归类

    从数据结构分 一.链表: 3.题目描述:输入一个链表,从尾到头打印链表每个节点的值(递归) 思路:递归调用,调一次,加一次到list中 14.题目描述:输入一个链表,输出该链表中倒数第k个结点 两个指 ...

  5. C 六度空间理论的实现

    “六度空间”理论又称作“六度分隔(Six Degrees of Separation)”理论.这个理论可以通俗地阐述为:“你和任何一个陌生人之间所间隔的人不会超过六个,也就是说,最多通过五个人你就能够 ...

  6. orcale 之 集合操作

    集合操作就是将两个或者多个 sql 查询的结果合并成复合查询.常见的集合操作有UNION(并运算).UNION ALL.INTERSECT(交运算)和MINUS(差运算). UNION UNION 运 ...

  7. vs2013中$(TargetPath)与Link.OutputFile不同,导致调试debug找不到exe

    之前把VS2008项目升级为VS2013项目后,出现了VS2013调试debug找不到exe文件的现象,如:http://blog.sina.com.cn/s/blog_6c617ee301013xt ...

  8. 另一个C#模拟post请求的例子

    private string returninstallTmnl(AddTmnlInstallParameter model) { string url = ConfigurationSettings ...

  9. Halcon学习笔记——条形码的定位与识别

    一维码的原理与结构 条码基本原理是利用条纹和间隔或宽窄条纹(间隔)构成二进制的”0“和”1“,反映的是某种信息. 一维条码数据结构,分四个区域.组成分别为静区.起始/终止符.校验符.数据符. 一维条码 ...

  10. spring整合springmvc和mybatis

    1.spring 1.1 jar包 1.2 spring基本配置,包扫描注解 <!-- 自动扫描 --> <context:component-scan base-package=& ...