一个简单的dropdown(CSS＋jquery）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

by 司徒正美

.dropdown{
position: relative;
}
.dropdown div{
position: relative;
width:200px;
height:30px;
border:1px solid rgb(228,228,228);
overflow: hidden;
}
.dropdown div input{
width:200px;
height:30px;
border: 0 none;
padding-left:10px;
position: absolute;
top:0px;
left:0px;
z-index: 1;

}
.dropdown div .close{
position: absolute;
width:40px;
height:30px;
text-align: center;
background: rgb(240, 240 240);
border:1px solid rgb(228,228,228);
line-height: 30px;
color:rgb(228,228,228);
z-index: 10;
right:0px;
top: 0px;
}
.dropdown select{
-webkit-appearance: none;
-moz-appearance: none;
position: absolute;
border:1px solid rgb(228,228,228);
top: 30px;
left: 0px;
z-index: 0;
width:200px;
display: none;
}
.dropdown select:focus{
border:1px solid rgb(228,228,228);
}
.dropdown.focus select{
display: block;
z-index: 2;
}
.dropdown select option{
padding-top:5px;
width:200px;
height:30px;
line-height: 30px;
padding-left: 10px;
}