自定义input上传美化标签

1.大家在项目中,经常会遇到input标签美化的问题,一些框架封装好的按钮,在某些时候并不能满足我们的需求,那么今天就写一个input上传控件的美化

2.在页面中定义一个input标签,在定义一个span标签

3.multiple 是 multiple="multiple" 属性的缩写,指的是支持多文件上传,而change事件是文件上传时必须要用到的事件.

4.下面是美化按钮的css部分

5.大家是不是觉得很简单,实际上就是鱼目混珠,让input标签完全透明,盖在span标签的上面,从而只需要美化span标签即可,再用定位的方式将二者调整到页面需要的地方,就大功告成了

6.这里需要注意的是属性 opacity:0 当值等于0的时候,表示完全透明,也就是肉眼是看不到的,但是该元素依旧存在页面中,还有一种元素透明属性 transparent:RGBA (大家若想了解,可以自行百度,这里就不多说了);其次要注意的是当元素定位后,就有了一个叫Z-index的属性,该属性表示Z轴距离眼睛的距离,表示的是元素的层叠关系,z-index值越大表示距离人眼睛的距离就越近,反之越远,该案例中我没有设置z-index值,原因有如下几点:

(1) 只要是定位了的元素,才有z-index属性 

(2) 若没有设置z-index值,默认都为0 

(3) z-index值越大,元素离眼睛的距离就越近,当z-index值相同时,元素在页面上从上到下,后面的元素始终会压着前面的元素;

这就是该案例中,没有设置z-index值,下面的input标签却能压着span标签,从而实现按钮的美化功能,下面试该案例的效果图: