更改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

  源码下载