一直以来,<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. url传递参数带 + ,解决办法

    修改客户端,将客户端带“+”的参数中的“+”全部替换为‍“%2B”,这样参数传到服务器端时就能得到“+”了.

  2. SpagoBI系列----------[01]SpagoBI简介及安装步骤

    商务智能套件SpagoBI提供一个基于J2EE的框架用于管理BI对象如报表.OLAP分析.仪表盘.记分卡以及数据挖掘模型等的开源BI产品.它提供的BI管理器能 够控制.校验.验证与分发这些BI对象. ...

  3. CMS: DNN And Umbraco

    在比较了众多CMS系统后,还是把焦点定在DNN和Umbraco两个系统上,这两个系统都可以使用UserControl扩展自己需要的功能. DNN的架构比较复杂,Module.Skin.Containe ...

  4. RPC的故事

    今天我跟几个RPC框架之间发生了一些事,情节跌宕起伏一波三折,不吐不快,以至于我这个从来不写博客的人也忍不住写下来分享一下. 背景 主系统部署在Windows上(.NET 4.5),子系统(.NET ...

  5. C 标准库 - string.h

    C 标准库 - string.h This header file defines several functions to manipulate C strings and arrays. stri ...

  6. poj 1284 Primitive Roots(未完)

    Primitive Roots Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 3155   Accepted: 1817 D ...

  7. React.js 小书 Lesson20 - 更新阶段的组件生命周期

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...

  8. C#基础 (一)

    值类型和引用类型 堆和栈 栈存放的数据: (1)某些类型变量的值(2)程序当前的执行环境(3)传递给方法的参数 堆是存放对象的地方 对象类型有两种: 值类型和引用类型,他们的存储方式不同值类型: 只需 ...

  9. 游标的小知识(转载and整理)

    一.游标(用来存储多条查询数据的一种数据结构(结果集),它有一个指针,用来从上往下移动,从而达到遍历每条记录的作用) 游标也可以理解为逐行返回SQL语句的结果集 如何编写一个游标? 1.声明游标 de ...

  10. 修改django 后台admin用户的密码

    python manage.py shellfrom django.contrib.auth.models import User from django.contrib.auth.models im ...