更改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>
<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
源码下载
