CSS美化 input type=file 兼容各个浏览器(转)
HTML代码:
<FORM>
<A class=btn_addPic href="javascript:void(0);"><SPAN><EM>+</EM>添加图片</SPAN>
<INPUT class=filePrew title=支持jpg、jpeg、gif、png格式,文件小于5M tabIndex=3 type=file size=3 name=pic></A>
</FORM>
CSS
*{margin:;padding:;}
a{text-decoration:none;}
.btn_addPic{
display: block;
position: relative;
width: 140px;
height: 39px;
overflow: hidden;
border: 1px solid #EBEBEB;
background: none repeat scroll 0 0 #F3F3F3;
color: #999999;
cursor: pointer;
text-align: center;
}
.btn_addPic span{display: block;line-height: 39px;}
.btn_addPic em {
background:url(http://p7.qhimg.com/t014ce592c1a0b2d489.png) 0 0;
display: inline-block;
width: 18px;
height: 18px;
overflow: hidden;
margin: 10px 5px 10px 0;
line-height: 20em;
vertical-align: middle;
}
.btn_addPic:hover em{background-position:-19px 0;}
.filePrew {
display: block;
position: absolute;
top:;
left:;
width: 140px;
height: 39px;
font-size: 100px; /* 增大不同浏览器的可点击区域 */
opacity:; /* 实现的关键点 */
filter:alpha(opacity=0);/* 兼容IE */
}
显示结果:

博客内容摘自:http://www.jb51.net/css/69093.html
CSS美化 input type=file 兼容各个浏览器(转)的更多相关文章
- input type="file"在各个浏览器下的默认样式,以及修改自定义样式
一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...
- 美化 input type=file控件
大家都知道input的type=file控件默认样式是不能修改的 可以通过一个小技巧处理下 html: <a href="javascript:;" class=" ...
- 上传图片 ajax input type="file" 兼容 ie chroem 火狐
上传图片,转载请注明出处!!! 兼容 ie chroem 火狐 html: <div id="uploadForm"> <input id="file& ...
- 【原创】js中input type=file的一些问题
1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...
- input[type="file"]的样式以及文件名的显示
如何美化input[type="file"] 基本思路是: (1)首先在 input 外层套一个 div : (2)将 div 和 input 设置为一样大小(width和heig ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】
首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...
- html input[type=file] css样式美化【转藏】
相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素.所以不能简单的把input隐藏,放个button上去. <a hre ...
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
随机推荐
- [BZOJ 3680] 吊打XXX 【模拟退火】
题目链接:BZOJ - 3680 题目分析 这道题是SLYZ的神犇把JSOI的平衡点那道题改了一下题面变成了吊打GTY神犇..Orz 第一次写模拟退火,只能照着别人的代码写,我看的是PoPoQQQ神犇 ...
- 【Java】WEB-INF目录与META-INF目录的作用
/WEB-INF/web.xml Web应用程序配置文件,描述了 servlet 和其他的应用组件配置及命名规则. /WEB-INF/classes/包含了站点所有用的 class 文件,包括 ser ...
- Spring整合CXF,发布RSETful 风格WebService
原文地址:http://www.cnblogs.com/hoojo/archive/2012/07/23/2605219.html 这篇文章是承接之前CXF整合Spring的这个项目示例的延伸,所以有 ...
- 读懂Java中的Socket编程
Socket,又称为套接字,Socket是计算机网络通信的基本的技术之一.如今大多数基于网络的软件,如浏览器,即时通讯工具甚至是P2P下载都是基于Socket实现的.本文会介绍一下基于TCP/IP的S ...
- 【POJ】1451 T9
DFS+字典树. #include <cstdio> #include <cstring> #include <cstdlib> typedef struct Tr ...
- 如何 对 Windows 窗体控件进行线程安全调用
//主线程 public delegate void UpdateMessage(string mes); public void UpdatePortMessage(string mes) { th ...
- activity+fragment多次切换出现页面空白问题
刚上手一个项目 懒的用viewpager+fragment模式,尽管在后面的项目中还是用到viewpager+fragment.先说说问题,多次切换fragment的时候页面出现空白,刚开始以为传递的 ...
- PHP中Content-type的MIME类型大全说明
<?php $mimetypes = array( 'ez' => 'application/andrew-inset', 'hqx' => 'application ...
- Django中的Form(二)
一.保存用户输入内容 如果用户输入一张表单提交后出现错误时,会出现重现填写的情况.我们可以把用户输入的信息保存下来,并返回到前台页面,这样用户就无需再次输入. views.py # coding:ut ...
- Corn Fields - POJ 3254(状态压缩)
题目大意:有一个M*N的牧场,G(i, j) = 1表示这块地营养丰富,可以喂养牛,等于0表示贫瘠,不能喂养牛,所有的牛都讨厌与别的牛相邻,求有多少种放置牛的方式. 分析:算是炮兵那个题的弱化版吧,先 ...