CSS自定义文件上传按钮样式，兼容主流浏览器代码,Css代码库,德仔网

代码语言

代码分类

【Css】 CSS自定义文件上传按钮样式，兼容主流浏览器

作者:讷言 / 发布于2014/5/20/ 1184

解决办法：使用text文本框及a链接模拟文件上传按钮，并且把文件上传按钮放在他们上面，并且文件上传按钮显示透明。


	<div class="box">
	 <input type="text" name="copyFile" class="textbox" />
	 <a href="javascript:void(0);" class="link">浏览</a>
	 <input type="file" class="uploadFile" name="upload"
	 onchange="getFile(this,'copyFile')" />
	</div>

	

	

	

	<style type="text/css">
	 * {
	 margin:0;
	 padding:0;
	 }
	 body {
	 font:14px Verdana, Arial, Geneva, sans-serif;
	 color:#404040;
	 background:#fff;
	 }
	 img {
	 border-style:none;
	 }
	 .main{
	 width:300px;
	 height:60px;
	 position:absolute;
	 left:50%;
	 top:50%;
	 margin-left:-150px;
	 margin-top:-30px;
	 }
	 .box{
	 position:relative;
	 float:left;
	 }
	 input.uploadFile{
	 position:absolute;
	 right:0px;
	 top:0px;
	 opacity:0;
	 filter:alpha(opacity=0);
	 cursor:pointer;
	 width:276px;
	 height:36px;
	 overflow: hidden;
	 }
	 input.textbox{
	 float:left;
	 padding:5px;
	 color:#999;
	 height:24px;
	 line-height:24px;
	 border:1px #ccc solid;
	 width:200px;
	 margin-right:4px;
	 }
	 a.link{
	 float:left;
	 display:inline-block;
	 padding:4px 16px;
	 color:#fff;
	 font:14px "Microsoft YaHei", Verdana, Geneva, sans-serif;
	 cursor:pointer;
	 background-color:#0099ff;
	 line-height:28px;
	 text-decoration:none;
	 }
	</style>

试试其它关键字

　上传按钮　

同语言下

可能有用的

讷言贡献的其它代码(2)