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拟合三维椭球
同学问的,查了下资料. %需要拟合的点的坐标为(0,-174.802,990.048),(0.472,-171.284,995.463),(0.413,-168.639,1003.55 ...
- 【HTTP】全面比较HTTP GET与POST方法
全面比较HTTP GET与POST方法 1. 基本信息比较 属性 GET方法 POST方法 历史: 通常使用GET方法发送的数据作为URL的一部分将会被浏览器保存起来 使用POST方法提交 ...
- node 与php整合
http://wenku.baidu.com/view/c1810c18b7360b4c2e3f6479.html http://www.xiaocai.name/post/cf1f9_7b6507 ...
- ☀【HTML5】Modernizr
Modernizr 使用Modernizr探测HTML5/CSS3新特性
- 简单登陆UI设计
简单UI设计 作品效果图: 关键技术: 用到了本地化控件:SharedPreferences,简单的说就是本地配置. 四大组件:Intent 基本思路请看代码: Java代码: import ...
- linux性能优化
一.最小化安装系统二.关闭NetworkManager服务. NetworkManger服务如果启动,当你手动配置网卡时会发生冲突 [root@linuxangel ~]# /etc/init.d/N ...
- jsp文件中的alert等等
<script type="text/javascript"> alert("aa: ${message}") </script>
- 使用Spring-data-redis操作Redis的Sentinel
介绍 Spring-Data-Redis项目(简称SDR) 是对Redis的Key-Value数据存储操作提供了更高层次的抽象,提供了一个对几种主要的redis的Java客户端(例 如:jedis,j ...
- c#基础语言编程-异常处理
异常的定义 异常就是程序中的运行时错误,当出现异常时,系统会捕获这个错误并抛出一个异常.若程序没有提供处理该异常的代码,系统会挂起这个程序. 常见异常的类型 System.Exception 最泛化的 ...
- 【Android - MD】之RecyclerView的使用
RecyclerView是Android 5.0新特性--Material Design中的一个控件,它将ListView.GridView整合到一起,可以使用极少的代码在ListView.GridV ...