国产女人被狂躁到高潮小说,亚洲日韩一区二区三区,色窝窝无码一区二区三区成人网站 ,丰满岳乱妇在线观看中字无码

400-800-9385
網站建設資訊詳細

網頁前端開發之input上傳按鈕美化

發表日期:2019-09-21 18:00:23   作者來源:嚴成   瀏覽:4506   標簽:    
在項目中我們前端人員經常碰到需要表單提交的地方,往往需要上傳一些證件、圖像、圖片之類的,而html自帶的上傳按鈕比較丑,如圖:

上傳界面1


經過美化后的上傳按鈕,如圖:
界面2

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

前端代碼1

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

前端代碼2
 
給這個file相對定位(position: relative;),把file'bo'x按鈕透明度opacity設置為0,絕對定位(position: absolute;);top、right、left、bottom為0,這樣filebox浮在file之上,樣式如下:

前端代碼3
 
當點擊filename或button時,因為filebox懸浮在file之上,所以最終點擊的是filebox。
如沒特殊注明,文章均為方維網絡原創,轉載請注明來自http://www.sdlwjx666.com/news/5329.html