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標籤,從而實現按鈕的美化功能,下面試該案例的效果圖: