好看的css下拉框样式,实用的漂亮的下拉框-CUSTOM DROP-DOWN LIST STYLING

插件描述：今天我给大家介绍一款下拉选择框，有5种漂亮的样式可供我们选择，真的蛮实用的

今天我给大家介绍一款下拉选择框，有5种漂亮的样式可供我们选择，真的蛮实用的

预览图

width="474" height="300" title="下拉框" alt="下拉框"/>

alt=""/>

alt=""/>

使用步骤

该插件有5种表现形式，下面我就介绍一下第一种样式的实现，其它的大概一致，大家可以参考 Demo

1、引入以下的js和css文件

2、在head标签中加入以下js代码

function DropDown(el) {

this.dd = el;

this.placeholder = this.dd.children('span');

this.opts = this.dd.find('ul.dropdown > li');

this.val = '';

this.index = -1;

this.initEvents();

}

DropDown.prototype = {

initEvents: function() {

var obj = this;

obj.dd.on('click',

function(event) {

$(this).toggleClass('active');

return false;

});

obj.opts.on('click',

function() {

var opt = $(this);

obj.val = opt.text();

obj.index = opt.index();

obj.placeholder.text('Gender: ' + obj.val);

});

},

getValue: function() {

return this.val;

},

getIndex: function() {

return this.index;

}

}

$(function() {

var dd = new DropDown($('#dd'));

$(document).click(function() {

// all dropdowns

$('.wrapper-dropdown-1').removeClass('active');

});

});

3、在body标签中加入以下格式的html代码

Gender

• Male

• Female