最近在做一个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
如果有什么不解的,可以提出.