您的位置:首页 > Web前端 > CSS

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

2013-05-21 11:34 274 查看


上面这个图,大家一看就知道是上传所用的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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐