在项目中我们前端人员经常碰着需求表单提交的处所，往往需求上传一些证件、图象、图片之类的，而html自带的上传按钮对比丑，如图：

经由丑化后的上传按钮，如图：


是否是悦目多了，只需求html和css就行了。制造的思绪是，把先前html自带的上传按钮(filebox)用一个div(file)包裹起来，其余在这个div里增加两个input(filename和button)，如图：

辨别给filename和button增加你想要丑化的格式，我的如图：



给这个file相对定位(position: relative;)，把file'bo'x按钮通明度opacity设置为0，相对定位(position: absolute;)；top、right、left、bottom为0，如许filebox浮在file之上，格式以下：



当点击filename或button时，因为filebox悬浮在file之上，以是终顶点击的是filebox。