最近在做一個asp.net的項目,需要對默認的dropdownlist樣式進行美化,固有的dropdownlist的小箭頭實在讓人無法接受,於是開始在百度,google 上下求索,天不負有心人,終於找到了一個完美解決方案(經過google搜素所得),各位客官可以到這個地址
Custom Checkboxes, Custom Radio Buttons, Custom Select Lists
詳細參考一下 核心js文件
custom-form-elements.min.js然后在要改變樣式的dropdownlist上添加一個名為“”styled"的class 需要在頁面上添加一個樣式,如下
.select { position: absolute; width: 158px; height: 21px; padding: 0 24px 0 8px; color: #fff; font: 12px/21px arial,sans-serif; background: url(select.png) no-repeat;/*span背景圖片,其實就是dropdownlist圖片*/ overflow: hidden; }
其實對該解決方案分析所得,這個方法非常巧妙,真正的dropdownlist進行了透明化,實際顯示的是一個span標簽,span的背景圖片就是實際看到的dropdownlist的美化結果,如果dropdownlist有后台事件的,需要
在這個custom-form-elements.min.js 中的choose函數的末尾添加
setTimeout('__doPostBack(\'' + this.id + '\',\'\')', 0);
this.id ----指當前操作的dropdownlist 的Id
如果有什么不解的,可以提出.