在項(xiàng)目中我們前端人員經(jīng)常碰到需要表單提交的地方，往往需要上傳一些證件、圖像、圖片之類的，而html自帶的上傳按鈕比較丑，如圖：

經(jīng)過(guò)美化后的上傳按鈕，如圖：


是不是好看多了，只需要html和css就行了。制作的思路是，把先前html自帶的上傳按鈕（filebox）用一個(gè)div（file）包裹起來(lái)，另外在這個(gè)div里添加兩個(gè)input（filename和button），如圖：
 

分別給filename和button添加你想要美化的樣式，我的如圖：


 
給這個(gè)file相對(duì)定位（position: relative;），把file'bo'x按鈕透明度opacity設(shè)置為0，絕對(duì)定位（position: absolute;）；top、right、left、bottom為0，這樣filebox浮在file之上，樣式如下：


 
當(dāng)點(diǎn)擊filename或button時(shí)，因?yàn)閒ilebox懸浮在file之上，所以最終點(diǎn)擊的是filebox。