英特网校

js/jq和css实现select的下拉按钮美化,自定义

网页开发中经常用到select(下拉框),由于浏览器自带样式比较不美观,而且不同浏览器样式也不经相同,如果想要在不同浏览器都显示效果相同,就必须重置他们的样式!
这里介绍利用JS和css对下拉框进行修改的方法,优化后支持ie6(6、7可能样式有小问题,不影响使用)以上版本、谷歌、火狐等主流浏览器。
实现原理:由于select是浏览器自带的表单控件,只能对select部分样式进行修改,而大部分option里面的样式很难修改,所以利用js对select中的所以元素进行重新生成,以dl,dt,dd的形式进行显示,同时对新生成的内容进行样式美化,以达到想要的页面效果。
HTML代码:
【注意】:只是本教程中的规范,为了方便操作
1、html代码结构必须同下面的html一致,在select外部有selectBox
2、option中的selected和disabled时option的属性,为了方便操作,将需要的属性放置class类里面,实际意义:class中有selected表示当前是选中状态,class中有disabled表示该项是不能进行选择的。

<div>
<select name="city">
<option value="1">请选择省份</option>
<option value="2">福建省</option>
<option value="3">吉林省</option>
<option value="4">福建省</option>
<option value="5">吉林省</option>
</select>
</div>

这时我们就可以利用js生成的新的结构
Js代码
$(".selectBox").append(function(){
var liDom='';
var dtstr="";
var ddstr="";
$(this).find('option').each(function(){
if($(this).hasClass("selected"))
{
dtstr="<dt><p>"+$(this).text()+"</p><div ><span></span></div></dt>";
}
var className=$(this).attr("class");
if(className==""||className==null){
ddstr+="<p>"+$(this).text()+"</p>";
}
else{
ddstr+="<p>"+$(this).text()+"</p>";
}
})
liDom=dtstr+"<dd>"+ddstr+"</dd>";
liDom="<dl>"+liDom+"</dl>";
return liDom;
})
生成后的html代码
<dl>
<dt>
<p>请选择省份</p>
<div><span></span></div>
</dt>
<dd>
<p>请选择省份</p>
<p>福建省</p>
<p>吉林省</p>
<p>福建省</p>
<p>吉林省</p>
</dd>
</dl>
数据和select中的数据时一一对应的,同时slect的option中class和生成的dd 下的p便签中的class也是相同的。这时在利用css对页面进行美化
CSS样式
*{margin:0;padding:0;}
.selectBox{margin:50px;}
.selectBox select{display: none;}
.selectBox .selectDl{position: relative;width: 190px;height: 40px;line-height: 40px;}
.selectBox .selectDl dt{border-radius:1px;cursor: pointer;color:#666;width:100%;height: 100%;border:1px solid #e5e5e5;box-sizing:border-box;text-indent: 10px;}
.selectBox .selectDl dt p{float:left;width: 155px;}
.triangle_down{width:0;height:0;border-width:6px 6px 0;border-style:solid;border-color:#e5e5e5 transparent transparent;/*灰 透明 透明 */margin:17px 10px 17px 0;position:relative;float:right;transform: rotate(0deg);-webkit-transform: rotate(0deg);transition: transform .5s;}
.triangle_up{transform: rotate(180deg);-webkit-transform: rotate(180deg);transition: transform .5s;}
.selectBox .selectDl dd{max-height:202px;overflow-y:auto;display: none;position: absolute;top:42px;background: #fff; border:1px solid #e5e5e5;box-sizing: border-box;width: 100%;z-index: 9;}
.selectBox .selectDl dd p{line-height: 40px;height:40px;text-indent: 10px;color:#333;cursor: pointer;}
.selectBox .selectDl dd p.selected,.selectBox .selectDl dd p.selected:hover{background: red;color:#fff;}
.selectBox .selectDl dd p.disabled,.selectBox .selectDl dd p.disabled:hover{background: #fff;color:#999;}
.selectBox .selectDl dd p:hover{background: #f5f5f5;color:#666;}
页面处理好后需要对dd 里的点击事件进行处理,项选择的状态同时赋值给option就可以实现下拉功能,由于代码比较多,下载可以观看课程代码。  

评论中心

登录后可评论,请 登录 注册