input元素[type=＂file＂]時(shí)的樣式定制及瀏覽器兼容性問題探討

<input type="file" />

<div id="input-file">
<span id="text">點(diǎn)擊上傳</span>
<input id="file" type="file" />
</div>

#input-file {
position: relative; /* 保證子元素的定位 */
width: 120px;
height: 30px;
background: #eee;
border: 1px solid #ccc;
text-align: center;
cursor: pointer;
}
#text {
display: inline-block;
margin-top: 5px;
color: #666;
font-family: "黑體";
font-size: 18px;
}
#file {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px; /* 寬高和外圍元素保持一致 */
height: 30px;
opacity: 0;
-moz-opacity: 0; /* 兼容老式瀏覽器 */
filter: alpha(opacity=0); /* 兼容IE */
}