交互设计中心-72色

交互设计中心 | 用户体验 | 优化

File input 浏览上传按钮样式和文字的更改方法

2009年12月17日 | 分类:DIV+CSS | 评论:2 | 引用:0 | 浏览: | Tags:input  file  兼容  按钮  


上面这个图,大家一看就知道是上传所用的input,有没有想把“浏览”这两个字替换成别的呢,比如“上传”或者适合用它的地方的文字。有的时候把网站的别的but样式改了,唯独这个浏览but样子不变,甚是不美。

网上我找了找 都是介绍用javascript代码改写,好麻烦,我72色命运还是很好的,让我在子鼠的博客上找到了用css来写的方法,简单多了。

解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传。是不是很简单呀。

具体代码:

<style>
#uploadImg{ font-size:12px; overflow:hidden; position:absolute}
#file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}
</style>
<span id="uploadImg">
<input type="file" id="file" size="1" >
<a href="#">上传图片</a> </span>

这样你就可以对样式进行想要的改变,改成图片,还是文字带背景。。。等等 想怎么改就怎么改。
而且还兼容ie6/ie7/firefox

Share
« 修改.htaccess做301重定向优化你的www网址jquery让数据列表活起来 »
  1. 三七八蛋头像
    三七八蛋 2010-1-16 18:41:21 1

    这个代码收藏了。


  1. 3214头像
    3214 2010-1-28 15:30:28 2

    你对TITLE 加个NAME 属性后就不行了啊····

    chia 于 2010-1-29 9:01:05 回复
    id 号 是不能去掉的 和name title 没关系的 这里只用css来做出的效果。




◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。