飞龙博客

feilong.org 前端开发教程

纯css模拟文件上传控件飞龙解决方案

飞龙更新于 2011-11-14 10:35 加入书签 CTRL+D 有 113 个朋友来过

这里放出来我以前做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主题模板文件里面,目前没有网上演示。

飞龙初发:
2011-11-14 10:35
本文更新网址:
https://feilong.org/css-simulate-upload-file-button

所在目录: 日记

新作:

旧文:

  • html css js
  • angular react vue
  • flutter python