在特定的控件下，给下拉框加垂直滚动条。_html/css_WEB-ITnose

各位大虾：很就没做程序了，现在把又重新把编码捡起来，有些吃力，碰到一个问题，请帮帮我，谢谢。
1、如何给下面的下拉框增加垂直滚动条，并把下拉框的高度控制在500px;
谢谢各位大虾。
程序源码如下：
part1：



New Document






/* --- EASYDROPDOWN DEFAULT THEME --- */

/* PREFIXED CSS */

.dropdown,
.dropdown div,
.dropdown li,
.dropdown div::after{
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}

.dropdown .selected::after,
.dropdown.scrollable div::after{
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
}

/* WRAPPER */

.dropdown{
position: relative;
width: 120px;
border: 1px solid #ccc;
cursor: pointer;
background: #fff;
height:26px;
border-radius: 2px;

}

.dropdown.open{
z-index: 999;
}

.dropdown:hover{
border: 1px solid #fe7700;
box-shadow: 0 0 5px #fe7700;
}

.dropdown.focus{
border: 1px solid #fe7700;
box-shadow: 0 0 5px #fe7700;
}

/* CARAT */

.dropdown .carat{
position: absolute;
right: 12px;
top: 50%;
margin-top: -2px;
border: 6px solid transparent;
border-top: 6px solid #ccc;
}

.dropdown.open .carat{
margin-top: -8px;
border-top: 6px solid transparent;
border-bottom: 6px solid #ccc;
}

.dropdown.disabled .carat{
border-top-color: #999;
}

/* OLD SELECT (HIDDEN) */

.dropdown .old{
position: absolute;
left: 0;
top: 0;
height: 0;
width: 0;
overflow: hidden;
}

.dropdown select{
position: absolute;

left: 0px;
top: 0px;
}

.dropdown.touch .old{
width: 100%;
height: 100%;
}

.dropdown.touch select{
width: 100%;
height: 100%;
opacity: 0;
}

/* SELECTED FEEDBACK ITEM */

.dropdown .selected,
.dropdown li{
display: block;
font-size: 12px;
line-height: 1;
align:left;
color: #000;
padding: 9px 12px;
overflow: hidden;
white-space: nowrap;
align:left;
}

.dropdown.disabled .selected{
color: #999;
}

.dropdown .selected::after{
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 60px;

border-radius: 0 2px 2px 0;
box-shadow: inset -55px 0 25px -20px #fff;
}

/* DROP DOWN WRAPPER */

.dropdown div{
position: absolute;
align:left;
height:0px;
left: -1px;
right: -1px;
top: 100%;
margin-top: -1px;
background: #fff;
border: 1px solid #ccc;
border-top: 1px solid #eee;
border-radius: 0 0 3px 3px;
overflow: hidden;
opacity: 0;
z-index:999;
box-shadow: 0 0 5px #ccc;

}

/* Height is adjusted by JS on open */

.dropdown.open div{
opacity: 1;
z-index: 2;

}

/* FADE OVERLAY FOR SCROLLING LISTS */

.dropdown.scrollable div::after{
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;

box-shadow: inset 0 -50px 30px -35px #fff;
}

.dropdown.scrollable.bottom div::after{
opacity: 0;
}

/* DROP DOWN LIST */

.dropdown ul{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
list-style: none;
overflow: hidden;

}

.dropdown.scrollable.open ul{
overflow-y: auto;
}

/* DROP DOWN LIST ITEMS */

.dropdown li{
list-style: none;
padding: 8px 12px;
}

/* .focus class is also added on hover */

.dropdown li.focus{
background: #fe7700;
position: relative;
z-index: 3;
color: #fff;
}

.dropdown li.active{
font-weight: 700;
}






/*
* EASYDROPDOWN - A Drop-down Builder for Styleable Inputs and Menus
* Version: 2.1.3
* License: Creative Commons Attribution 3.0 Unported - CC BY 3.0
* http://creativecommons.org/licenses/by/3.0/
* This software may be used freely on commercial and non-commercial projects with attribution to the author/copyright holder.
* Author: Patrick Kunka
* Copyright 2013 Patrick Kunka, All Rights Reserved
*/


(function($){

function EasyDropDown(){
this.isField = true,
this.down = false,
this.inFocus = false,
this.disabled = false,
this.cutOff = false,
this.hasLabel = false,
this.keyboardMode = false,
this.nativeTouch = true,
this.wrapperClass = 'dropdown',
this.onChange = null;

};

EasyDropDown.prototype = {
constructor: EasyDropDown,
instances: [],
init: function(domNode, settings){
var self = this;

$.extend(self, settings);
self.$select = $(domNode);
self.id = domNode.id;
self.options = [];
self.$options = self.$select.find('option');
self.isTouch = 'ontouchend' in document;
self.$select.removeClass(self.wrapperClass+' dropdown');
if(self.$select.is(':disabled')){
self.disabled = true;
};
if(self.$options.length){
self.$options.each(function(i){
var $option = $(this);
if($option.is(':selected')){
self.selected = {
index: i,
title: $option.text()
}
self.focusIndex = i;
};
if($option.hasClass('label') && i == 0){
self.hasLabel = true;
self.label = $option.text();
$option.attr('value','');
} else {
self.options.push({
domNode: $option[0],
title: $option.text(),
value: $option.val(),
selected: $option.is(':selected')
});
};
});
if(!self.selected){
self.selected = {
index: 0,
title: self.$options.eq(0).text()
}
self.focusIndex = 0;
};
self.render();
};
},

render: function(){
var self = this,
touchClass = self.isTouch && self.nativeTouch ? ' touch' : '',
disabledClass = self.disabled ? ' disabled' : '';

self.$container = self.$select.wrap('

查看更多关于在特定的控件下，给下拉框加垂直滚动条。_html/css_WEB-ITnose的详细内容...