更改input type="file" 的样式

weixin_30278311

于 2009-09-15 22:54:00 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/dooom/archive/2009/09/15/1567341.html

本文介绍了一个效果类似校内网首页的图片分享功能的实现方法。通过HTML和CSS技巧，实现了点击图片时弹出文件选择框的功能，并提供了源代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

代码

< 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

源码下载

转载于:https://www.cnblogs.com/dooom/archive/2009/09/15/1567341.html