初次使用html5的新標簽inputp[type="file"]那時，看見標簽樣式的那一刻我是沉默的甫煞，怎么可以這么丑俺亮？所以我就動動小手，準備美化一下罩润。于是寫下了以下代碼：
<!--html-->
<input type="file" id="style"/>
/*css*/
#style{
width: 168px;
height: 38px;
background: #fff;
border: 1px #CFCFCF solid;
border-radius: 5px;
}
搖頭晃腦輕松自在地打開chrome，腦袋里已經(jīng)自動播放樣式了翼馆，然而看到的樣式還是...辣么丑割以。
丑丑的input
于是我就發(fā)揮我的聰明才智Google了一下，發(fā)現(xiàn)大多人的做法都是相差無幾的应媚，做法如下：
1.在input外邊包裝一層a標簽 严沥，并設置絕對定位
- input的透明度設置為0
- 把要出現(xiàn)的2文字寫在input旁邊并設置相對定位
- 把樣式寫給a標簽，但是不能設置寬高中姜，不然點擊就會直接點a標簽消玄，而input就被覆蓋了。
嘻嘻丢胚，寫個小demo：
<!--html-->
<a href="javascript:(void)" class="upload-wrap">
<input id="upload" type="file"/>
<span class="upload-icon">上傳文件</span>
</a>
/*css*/
#upload {
opacity: 0;
width: 138px;
height: 38px;
}
.upload-wrap {
position: relative;
display: inline-block;
}
.upload-icon {
position: absolute;
top: 7px;
left: 24px;
color: black;
}
最終樣式
好的翩瓜，然后我們會發(fā)現(xiàn)，選擇文件后的路徑也被opacity為0了携龟，這是后就要用到我們強大的js了兔跌。哈哈哈哈哈好吧，其實也只有幾行代碼峡蟋。如下：
var upload = document.getElementById('upload');
upload.onchange = function(){
console.log(this.value);
}
