<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.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>
<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="上传" />
<input type="button" value="自定义" onclick="document.getElementById('fileField').click()"/>
</form>
</div>
</body>
</html>
//此方式能实现
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 预算导入</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="../demo.css" rel="stylesheet" type="text/css" />
<script src="../../common/nui/nui.js" type="text/javascript"></script>
<style type="text/css">
.tab{
border:1px solid #87CEEB;
width:800px;height:8em;
border-collapse:collapse;
}
.tab th{
background-color:#F0F8FF;
border:1px solid #87CEEB;
}
.tab td{
border:1px solid #87CEEB;
}
.flBtn{width:1px;height:1px;opacity: 0;filter:alpha(opacity:0);}
</style>
</head>
<body>
<h3>预算导入</h3>
<div>
<form action="" method="post" enctype="multipart/form-data">
<table class="tab">
<tr>
<th>预算年度</th>
<td >
<select>
<option>2016</option>
</select>
</td>
</tr>
<tr>
<th>年度预算导入</th>
<td>
<input type="text" id="fileShow"/>
<input type="file" class="flBtn" id="fileBtn" onclick="document.getElementById('fileShow').value=document.getElementById('fileBtn').value;"/>
<input type="button" value="浏览" id="fileTrigger" onclick="document.getElementById('fileBtn').click();"/>
<input type="submit" value="上传" />
<input type="button" value="模板下载"/>
</td>
</tr>
<tr>
<th>年度预算导出</th>
<td ><input type="button" value="预算导出" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
//此方式出现显示不同步
