在日常重構中，form表單家族中的 upload field 在使用 css 美化時令人頭疼！默認情況下，各個瀏覽器下的表現層次不齊！如下圖所示，讓我等情何以堪。

通常，我們的設計師同學、產品同學都希望文件上傳域能夠在表現上有所突破：點擊頁面中美化過的圖片“選擇文件”就可以完美實現文件上傳域的功能。唉，理想很豐滿，現實很骨感！每當我接到這樣的要求就會淚流滿面，加圖片容易，但它無法工作啊！

好吧，苦逼的前端開始想辦法了：用JS去模擬，貌似這個可行！

但是如果用戶禁用腳本呢？唉，能否有一個簡單的處理方式呢？

經過一番試驗，重構組的同學想到一個方案，哈哈，純CSS實現，代碼很簡單的哦。

方案如下：

默認情況下，瀏覽器中的芙蓉姐姐（文件上傳域）是這個樣子的：

美化后呢？哎呦喂，經過重構后的芙蓉脫胎換骨哦！

好啦，不賣關子了，上代碼。

HTML

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表