兼容火狐 google IE6 以上等上传按钮样式

发表于:2014-07-31 20:45:39 | 阅读数:--次| 作者:小猪仔

摘要：兼容火狐 google IE6 以上等上传按钮样式,支持IE6,7,8和火狐和谷歌,通用的样式，支持在线浏览，在线复制，复制之后立马能运行

		html代码
	

运行代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>兼容火狐 google IE6 以上等上传按钮样式-web开发</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px; margin-top:50px;}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<center>
   <div class="file-box">
     <form action="" method="post" enctype="multipart/form-data">
         <input type='text' name='textfield' id='textfield' class='txt' />  
         <input type='button' class='btn' value='浏览...' />
         <input type="file" name="fileField" class="file" id="fileField" size="28" onChange="document.getElementById('textfield').value=this.value" />
         <input type="submit" name="submit" class="btn" value="上传" />
     </form>
</div>
</center>

<center>
<p><strong><a href="http://www.webkfa.com" style="color:#FF9900" target="_blank">web开发</a>网站整理</strong> </p>
<p>欢迎大家进群讨论web开发知识！</p>
<p>来源于:webkfa</p>
</center>

</body>
</html>