美化文件域input type=file的样式

来源:互联网 发布:网站源码可以干什么 编辑:程序博客网 时间:2024/06/05 00:30

原理是:

    把这个input type=file的设置的不出现在屏幕中的可见区域内,然后用一个button出现,这个button就相当于原来type=file的那个选择文件的按钮。点击button就触发原来的选图片。在最外层给他添加一个背景图片。这个图片的样式就是type=file的样式。

简而言之,用那个背景图代替按钮,那个button代表


<div class="fileInput left">
           <input type="file" name="upfile" id="upfile" class="upfile"/>
           <input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
</div>


 .fileInput{position:relative;width:102px;height:34px;background:url(http://funet8.com/img/2.png);overflow:hidden;}
 .upfile{position:absolute;top:-100px;}  //绝对定位到屏幕的看不到的位置
 .upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}    //透明度是0,看不见.但是点击的功能好在。


0 0
原创粉丝点击