更改input type="file" 的样式

效果类似校内网首页的图片分享功能

点击图片弹出文件选择框
源码如下

代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<style>
input.inputclass{background-color:#FFFFFF;
cursor:pointer;
height:25px;
margin-left:-28px;
filter:alpha(opacity=0);-moz-opacity:.0;opacity:0.0;
width:10px;}
div.topdiv
{
background:transparent url(聆听我.jpg) no-repeat scroll 0 0px;
cursor:pointer;
overflow:hidden;
padding-left:0;
width:43px;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="topdiv">
    <input type="file" size="0" class="inputclass"/>
    </div>

</br>
  </form>
</body>
</html>

支持 FF IE6 IE7

源码下载