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

发表日期:2021-11-29 10:36:14 浏览次数:299

在项目中我们前端人员经常碰到需要表单提交的地方,往往需要上传一些证件、图像、图片之类的,而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。
特别提示:部分资源信息来源于网络,如您发现侵犯您的权利,请联系我们删除。
最新资讯

建站相关案例