400-800-9385
网站建设资讯详细

网页前端开发之input上传按钮美化

发表日期:2019-09-21 18:00:23   作者来源:严成   浏览:181   标签:    
在项目中我们前端人员经常碰到需要表单提交的地方,往往需要上传一些证件、图像、图片之类的,而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。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/5329.html