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 兼容各个浏览器(转)的更多相关文章

  1. input type="file"在各个浏览器下的默认样式,以及修改自定义样式

    一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...

  2. 美化 input type=file控件

    大家都知道input的type=file控件默认样式是不能修改的 可以通过一个小技巧处理下 html: <a href="javascript:;" class=" ...

  3. 上传图片 ajax input type="file" 兼容 ie chroem 火狐

    上传图片,转载请注明出处!!! 兼容 ie chroem 火狐 html: <div id="uploadForm"> <input id="file& ...

  4. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

  5. input[type="file"]的样式以及文件名的显示

    如何美化input[type="file"] 基本思路是: (1)首先在 input 外层套一个 div : (2)将 div 和 input 设置为一样大小(width和heig ...

  6. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  7. 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

    首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...

  8. html input[type=file] css样式美化【转藏】

    相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素.所以不能简单的把input隐藏,放个button上去. <a hre ...

  9. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

随机推荐

  1. 手动更改WIN远程桌面端口,要改两个地方的注册表哟

    看到我的服务器有老多人在用桌面连接,虽然进不去,但他们不停地试,浪费掉不少服务器资源,我看到网上有不少关于修改3389的介绍.修改3389的工具,一些工具一点用都没有,纯属扯淡.修改后照样是3389. ...

  2. QT 读写二进制 (数值)高位在前

    在人们的计数规则中,一般都认为高位在前,即往前的地位大,如123,我们认为是一百二十三, 但在计算机中数值是以二进制存储的,字节是最小的存储单位,如int(32位),占4个字节,每个字节有八位, 24 ...

  3. Oracle“不等于号”与Nulls的情况(转)

    今天突然才发现,Oracle中的“不等于操作符”是忽略null的. 比如,查询comm不等于的500的记录,我会理所当然地使用where comm != 500 预想会返回包含null的不等于500的 ...

  4. 通过dblink impdp导入

    实验: 源数据库:10.5.129.160 dwhtest 需要导入的数据库:10.5.129.130 dwhtest 在10.5.129.130上创建DBLINK SQL> create  p ...

  5. 【fs】

     先判断是否存在再删除

  6. HUD --- 3635

    Five hundred years later, the number of dragon balls will increase unexpectedly, so it's too difficu ...

  7. unity3d 制造自己的水体water effect(一)

    first,I wish you a happy new year, and study in spring festival’s eve means you are hardworking,haha ...

  8. 用Delphi制作仿每行带按钮的列表

    Delphi做程序开发在使用到列表控件时,一般是列表放文本内容,在列表以外放操作按钮,选中列表某项再点按钮进行操作.现在Web开发做列表的样式总是列表的每行都有操作按钮,如微博的列表风格: Web开发 ...

  9. [转载+整理]JVM性能调优----JVM架构

    JVM的总体结构参考如下两图:

  10. 你不一定能做对的JavaScript闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...