点图片上传利用CSS 隐藏input输入框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点图片上传</title>
<style>
.ferea {
width:106px;
height:22px;
display:block;
margin-top:5px;
background:url(up_photo.gif) no-repeat;
border:0;
cursor:pointer;
}

/*file设为透明，并覆盖整个触发面*/
input.files {
margin-left:-245px;
font-size:22px;
cursor:pointer;
filter:alpha(opacity=0);
opacity:0;
}
/*取消点击时的虚线框*/
input.files {
outline:none;/*ff*/
hide-focus:expression(this.hideFocus=true);/*ie*/
}
</style>
</head>
<body>
<form id="uploadForm" action="File.ashx">
<table border="0" cellspacing="1" class="fu_list">

      <tr>
        <td><span id="FileErea" class="ferea"><input type="file" name="fileId"

class="files"></span></td>

      </tr>


</table>
</form>
</body>
</html>

posted on 2009-07-04 01:17 许维光阅读(1667) 评论(0) 收藏举报