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

1.新浪注册

思路:

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; height:30px;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>