利用label标签和CSS美化文件上传表单(不兼容IE6)代码,Java代码库,德仔网

代码语言

代码分类

【Java】利用label标签和CSS美化文件上传表单(不兼容IE6)

作者:Mr.Think / 发布于2013/9/4/ 921

文件上传类型表单是一个让很多前端开发者纠结过的表单类型，因为它是一个无法单纯用CSS给它定义兼容的样式。上周的工作中有个批量上传图片的页面，又遇到了这个问题，于是，今天把我的解决方案奉献给大家：利用label标签与CSS共同打造一个样式可控的并兼容IE6之外主流浏览器的上传表单。


	HTML代码:
	
	<div class="btns">
	
	<input type="file" size="6" class="btn_file_molding" id="input_file_molding">
	
	 <label for="input_file_molding">
	
	<input type="button" value="添加照片"></label>
	
	</div>

	
	CSS代码:
	
	
	.btns{position:relative}
	
	.btns input{width:120px;height:30px}
	
	.btns .btn_file_molding{position:absolute;left:0;top:0;z-index:1;border:0 none;filter:alpha(opacity=0);opacity:0}/*file的z-index要大于button*/

试试其它关键字

同语言下

可能有用的

Mr.Think贡献的其它代码(4)