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 ...
随机推荐
- MATLAB中的结构数组
MATLAB中的结构数组 结构数组: 结构是包含一组记录的数据类型,而记录则是存储在相应的字段中.结构的字段可以是任意一种MATLAB数据类型的变量或者对象.结构类型的变量也可以是一维的.二维的或多维 ...
- 手动删除文件夹exe病毒并恢复原来文件夹
转自手动删除文件夹exe病毒并恢复原来文件夹 经常使用U盘.MP3.MP4等移动硬盘的大家,有时是不是会发现,移动硬盘里有现了exe文件,原来本来有一个文件夹的名字是 音乐 ,但后来发现 音乐 这个文 ...
- Dictionary Size
uvaLive5913:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&pag ...
- pfSense软路由防火墙
才刚刚架起来,等着入门呀.. 想作网络的QOS限流这些的...
- SpringMVC+Json构建基于Restful风格的应用(转)
一.spring 版本:spring-framework-3.2.7.RELEASE 二.所需其它Jar包: 三.主要代码: web.xml <?xml version="1.0&qu ...
- To enable integrated Windows authentication in Windows Vista/IIS 7
https://msdn.microsoft.com/en-us/library/x8a5axew.aspx Log on to the Web server by using an administ ...
- [LeetCode#191]Number of Bits
Problem: Write a function that takes an unsigned integer and returns the number of ’1' bits it has ( ...
- 【转】Eclipse使用git最简易流程
原文网址:http://www.cnblogs.com/ZhangWanFan/p/3993733.html git有诸多好处,网上都说的很清楚了,在这里我不再赘述.对于我来说,私下里想做一些项目,而 ...
- 数据结构(莫队算法):HH的项链
问题描述: HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此, 他的项链变得越来越长. ...
- 【转】 各种 基于Unity3d 引擎的Android游戏优化 (drawcall)
合并纹理,减少贴图数量,合并网格,ui上减少不必要的层级叠加关系等 1. 更新不透明贴图的压缩格式为ETC 4bit,因为android市场的手机中的GPU有多种,每家的GPU支持不同的压缩格式 ...