自定義input上傳美化標籤

2022-09-22 22:42:23 字數 762 閱讀 1715

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標籤,從而實現按鈕的美化功能

自定義ImageLinkButton美化提交按鈕

在提交中,最常用的是button,不過最近想在button前面顯示一張,做起來很麻煩。讓人你可以說使用imagebutton,但是imagebutton的imageurl的image無法多次重用,使用style控制button的背景,在文字過長時,也難以控制項,所以採用下面給出的乙個解決方法 1建立...

自定義標籤

由於字典的緣故,當前表中資料存的是字典表的code,所以在頁面顯示的時候需要再次進行轉換。於是我就想到了用標籤來解決這個問題。1.建立自己的標籤 public class displaytag extends tagsupport override public int doendtag throw...

自定義標籤

1 前段時間由於系統需要使用到資料字典,簡而言之就是用下拉將字典的內容顯示出來。我也是參考了一下別人的例項結合自己的業務需求,才將此功能實現。在此將大楷實現步奏記錄下來,以方便以後翻閱。2 在我們專案中使用了2張表來實現此功能。a csms t baseinfo 字典名稱 b csms t base...