html+css實現自定義圖片上傳按鈕

自定義上傳圖片按鈕
普通的input[type=‘file’]的效果很樸素
普通的file效果
可以自定義一個file選擇文件的按鈕:

思路爲:
用定位將自定義的按鈕遮住原來的選擇文件按鈕,
再讓點擊自定義按鈕時觸發原來的選擇文件按鈕的事件即可
(對此,label可實現)

eg:
html:
自定義選擇文件按鈕替換原按鈕佈局
css樣式:
自定義選擇文件按鈕CSS樣式佈局
結果圖:
自定義選擇圖片按鈕

點擊“選擇圖片”按鈕,則會觸發選擇圖片的事件,你就可以選擇圖片啦!

以上,是用bootstrap實現的,原生的如下:

html:
原生自定義文件上傳按鈕html
CSS:
原生自定義文件上傳按鈕CSS

效果圖:
原生自定義文件上傳按鈕的效果圖
點一下,就可以彈出選擇文件的文件夾啦!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章