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

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

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

html 代码如下：

投资种类

• 期货
• 股票
• 期权

投资类型

• 趋势
• 震荡
• 套利
• 选股
• 择时

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 的布局。

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