js实现select选择框效果及美化

网上有各种各样的关于 select 选择框的美化，找了很多，并没有好的样式效果。所以就找了一个利用 ul li 做的类似 select 选择框的效果，不废话了，先上图，效果如下：

点击一个 test ，就会把列表显示出来，再次点击，列表隐藏，选择一个 li ，就会把 span 里的内容替换成 li 的内容，然后可以用 js 监控 span 的变化，然后执行你的代码。效果如下： 

html 代码如下： 

<div id="type" class="test">
 <span>投资种类</span>
 <ul class="dropdown">
 <li>期货</li>
 <li>股票</li>
 <li>期权</li>
 </ul>
</div>
<div id="kind" class="test">
 <span>投资类型</span>   
 <ul class="dropdown">
 <li>趋势</li>
 <li>震荡</li>
 <li>套利</li>
 <li>选股</li>
 <li>择时</li>
 </ul>
</div>

css 代码如下： 

ul li{
 list-style: none;
}
.test {
 position: relative;
 float: left;
 width: 120px;
 height: 40px;
 padding-left: 11px;
 font-size: 15px;
 line-height: 40px;
 cursor: pointer;
 border: 1px solid #d2d2d2;
 border-radius: 3px;
 margin-right: 20px;
 outline: none;
}
.test:before {
 position: absolute;
 right: 13px;
 top: 18px;
 width: 0;
 height: 0;
 content: "";
 border-width: 8px 8px 0 8px;
 border-style: solid;
 border-color: #d36969 transparent;
 -webkit-transition: transform .25s;
 -moz-transition: transform .25s;
 -ms-transition: transform .25s;
  -o-transition: transform .25s;
  transition: transform .25s;
}
.test:after {
 position: absolute;
 right: 15px;
 top: 18px;
 width: 0;
 height: 0;
 content: "";
 border-width: 6px 6px 0 6px;
 border-style: solid;
 border-color: #fff transparent;
 -webkit-transition: all .25s;
 -moz-transition: all .25s;
 -ms-transition: all .25s;
  -o-transition: all .25s;
  transition: all .25s;
}
.test.active:before{
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg); 
}
.test.active:after{
 top: 20px;
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg); 
}
.test .dropdown {
 position: absolute;
 right: 0;
 left: 0;
 display: none;
 padding: 0;
 border-radius: inherit;
 border: 1px solid #d2d2d2;
 box-shadow: 2px 2px 5px rgba(0,0,0,.4);
}
.test.active .dropdown {
 display: block;
}
.test .dropdown:before {
 position: absolute;
 right: 13px;
 bottom: 100%;
 width: 0;
 height: 0;
 content: "";
 border-width: 0 8px 8px 8px;
 border-style: solid;
 border-color: #d2d2d2 transparent;
}
.test .dropdown:after {
 position: absolute;
 right: 15px;
 bottom: 100%;
 width: 0;
 height: 0;
 content: "";
 border-width: 0 6px 6px 6px;
 border-style: solid;
 border-color: #fff transparent;
}
.test .dropdown li {
 float: left;
 width: 129px;
 font-size: 14px;
 -webkit-transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
 text-align: center;
}
.test .dropdown li:first-of-type {
 border-radius: 3px 3px 0 0;
}
.test .dropdown li:last-of-type {
 border-radius: 0 0 3px 3px;
}
.test .dropdown li:hover {
 color: #fff;
 background: #c43c3d;
}

对于 :before 和 :after 两个伪元素不理解可以去看看我上篇博客 点击这里

js 代码如下： 

function DropDown(el) {
 this.dd = el;
 this.span = this.dd.children('span');
 this.li = this.dd.find('ul.dropdown li');
 this.val = '';
}
DropDown.prototype.initEvents = function() {
 var obj = this;
 obj.dd.on('click', function(event){
 $(this).toggleClass('active').siblings().removeClass('active');
 event.stopPropagation();
 });
 obj.li.on('click', function() {
 var opt = $(this);
 obj.val = opt.html();
 if (obj.span.html() == obj.val) return;   
 obj.span.html(obj.val);
 $(document).click(function() {
  $('.test').removeClass('active');
 });
 })
}
var test1 = new DropDown($('#type'));
var test2 = new DropDown($('#kind'));
test1.initEvents();
test2.initEvents()

这里使用构造-原型组合模式来创建了一个 DropDown 对象，构造-原型组合模式解释：属性写在构造函数中，是表示每个实例独有的属性，让对象具体化；方法写在构造函数外，是为了表示每个实例共享的方法。 

但是这里有点不好的方法是，已限制了 html 的布局。

精彩专题分享：javascript选择框操作汇总    jquery选择框操作汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• JS简单设置下拉选择框默认值的方法
• js表单处理中单选、多选、选择框值的获取及表单的序列化
• js下拉选择框与输入框联动实现添加选中值到输入框的方法
• js实现仿阿里巴巴城市选择框效果实例
• JS+CSS实现实用的单击输入框弹出选择框的方法
• 自定义的一个简单时尚js下拉选择框
• js 自定义个性下拉选择框示例
• Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
• js实现一个省市区三级联动选择框代码分享
• js判断选择时间不能小于当前时间的示例代码
• JS日期和时间选择控件升级版(自写)
• JS时间选择器 兼容IE6,7,8,9
• JS实现漂亮的时间选择框效果