亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.430618.com 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

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


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


<input type='file'>

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


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


可以自定義一個file選擇文件的按鈕:

思路為:

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

html:


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


css樣式:


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


結果圖:


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


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

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

html:


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


CSS:


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


效果圖:


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


點一下,就可以彈出選擇文件的文件夾啦!


分享到:
標簽:html+css 自定義上傳按鈕
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定