分享新浪注册边框效果和网易邮箱上传控件

时间：2011-03-03 来源：New.min

思路:

Html嵌套:

<span class="inputBorder"><input type="text"/></span>

准备一张边框效果图，足够长的,

将span做为块元素显示，并将边框图做为背景,设置span padding-left:3px;

然后将input的背景设为边框图，背景右靠齐

相当于用span的背景显示圆角边框的左边,通过背景右对齐的input显示右边脚，

这样一来就凑成了一个圆角输入边框

2.上传控件

原理:将文件选择框放到span,设置span的背景,然后将

<input type="file"/>的透明度设为0

代码:

<style type="text/css">      
  .fileBtn { width:90px; display:block;border:solid 1px #CCC; 
                  background:url(btn_File.gif) no-repeat;overflow:hidden; }
  .fileBtn input{filter:alpha(opacity=0);opacity:0;}
</style>

<span class="fileBtn">
        <input type="file" onchange="alert(this.value);" />
</span>

相关阅读更多 +