纯css模拟文件上传控件飞龙解决方案
feilong.org 修订于2011-11-14 10:35:43 您好，第 292 位朋友！这里放出来我以前做wordpress定制的css模拟文件上传控件的方案，呵呵。可以说找了很多网上资料，不过自己整了一下，基本上可以的。本日志修订地址：http://feilong.org/css-simulate-upload-file-button
一、首先是模拟文件上传的html，如下：
<span class="fileshape"> <input type="text" id="t1" class="input"> <input type="button" id="b1" class="btn" onclick="f1.click();" value="浏览"> <input type="file" id="f1" onchange="t1.value=this.value" name="videoface" class="file"> </span> |
飞龙提示：带个span套套先,为什么不用a呢，因为input本身是内联元素不带链接的，span基本吻合。其中的id好可以根据实例修改，注意id的对应关系！
二、好，再写相关的css，如下：
/*feilong css simulate upload file button 20101112 */ span.fileshape{ display:inline; position:relative;z-index:30;} input.input{} input.btn{width:70px;height:30px;font-size:12px;} input.file{height:30px; position:absolute;top:-4px; left:0;z-index:100;*top:-1px;_top:-0px; filter:alpha(opacity=0);-moz-opacity:0;opacity:0;} /*feilong.org welcome you back */ |
飞龙提示：写css首先要重置css，也就是 reset css，可以查看飞龙的相关文章：http://feilong.org/css-reset
三、有具体的效果，不过在我的wordpress主题模板文件里面，目前没有网上演示。
更新网址：https://feilong.org/css-simulate-upload-file-button
最初发布：20111114 10:35:43 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 日记