2009年3月10日星期二

CSS修饰上传域<input type="file" />

在WebMail项目中,我们需要使用图片修饰的按钮来替代系统默认的上传域。

原理:

将上传上传域透明,绝对定位叠在修饰的图片按钮上方,点击图片按钮时其实是点到上传域。

问题:

图片按钮太大时,上传域的可点击区域不能将其完全覆盖。

解决方法:

加大字体。

HTML:

<input class="file" type="file" />

CSS:

input.file{font-size:5em;}

各浏览器显示效果:

嘿嘿,这下够用了吧~

延伸阅读:

2 条评论:

杨俊 说...

有没有饭否 http://www.fanfou.com 账号?去关注你,这个twitter俺学校连不上....国外的网站

ytzong 说...

不好意思,还莫有啊