CSS自定义文件上传按钮样式，兼容主流浏览器
1. [代码][HTML]代码
1 <div class="box"> 2 <input type="text" name="copyFile" class="textbox" /> 3 <a href="javascript:void(0);" class="link">浏览</a> 4 <input type="file" class="uploadFile" name="upload" 5 onchange="getFile(this,'copyFile')" /> 6 </div>
2. [代码][CSS]代码
1 <style type="text/css"> 2 * { 3 margin:0; 4 padding:0; 5 } 6 body { 7 font:14px Verdana, Arial, Geneva, sans-serif; 8 color:#404040; 9 background:#fff; 10 } 11 img { 12 border-style:none; 13 } 14 .main{ 15 width:300px; 16 height:60px; 17 position:absolute; 18 left:50%; 19 top:50%; 20 margin-left:-150px; 21 margin-top:-30px; 22 } 23 .box{ 24 position:relative; 25 float:left; 26 } 27 input.uploadFile{ 28 position:absolute; 29 right:0px; 30 top:0px; 31 opacity:0; 32 filter:alpha(opacity=0); 33 cursor:pointer; 34 width:276px; 35 height:36px; 36 overflow: hidden; 37 } 38 input.textbox{ 39 float:left; 40 padding:5px; 41 color:#999; 42 height:24px; 43 line-height:24px; 44 border:1px #ccc solid; 45 width:200px; 46 margin-right:4px; 47 } 48 a.link{ 49 float:left; 50 display:inline-block; 51 padding:4px 16px; 52 color:#fff; 53 font:14px "Microsoft YaHei", Verdana, Geneva, sans-serif; 54 cursor:pointer; 55 background-color:#0099ff; 56 line-height:28px; 57 text-decoration:none; 58 } 59 </style>
方法二：
1、代码
<div class="upload_button">
+上传图片
<input type="file" id="idcard_back" name="idcard_back" class="file_button"/>
</div>
2、样式
.file_button{width:150px;height:30px;line-height:30px;font-size:14px;font-weight:bold;margin:5px;position: absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0; left:-75px;top: 0px;cursor: pointer;margin: 0;padding: 0;}
.upload_button{width:75px;height: 30px;text-align: center;line-height: 30px;background-color: #c5d9ff;border: solid 1px #7faaff;font-size: 12px;display: inline-block;overflow: hidden;position: relative;}
效果如图：
