html+css如何實現自訂圖片上傳按鈕

本篇文章給大家詳細介紹一下html css實作自訂圖片上傳按鈕的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

的普通的input[type='file']的效果很樸素

##可以自訂一個file選擇檔案的按鈕：

想法為：

用定位將自訂的按鈕遮住原來的選擇檔案按鈕，再讓點擊自訂按鈕時觸發原來的選擇檔案按鈕的事件即可（對此，label可實現）

eg:

html:

css樣式：

結果圖：

#點擊「選擇圖片」按鈕，則會觸發選擇圖片的事件，你就可以選擇圖片啦！

以上，是用bootstrap實作的，原生的如下：

html:

CSS:

##效果圖：

點一下，就可以彈出選擇檔案的資料夾啦！

推薦學習：

css影片教學

#

以上是html+css如何實現自訂圖片上傳按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！