引一个jquery。


CSS：


body{

margin:0;

padding: 0;

font: 14px "微软雅黑";

background-color: #bc5122;

color: #fff;

}

.box{

padding-top: 50px;

width: 30%;

height: auto;

margin: 0 auto;

}


p,ul,li{

list-style: none;

padding: 0;

margin: 0;

}

.select{

position: relative;

width: 100%;

height: 40px;

margin: 20px 0;

}

.select_text{

overflow: auto;

cursor: pointer;

border-radius: 5px;

background-color: rgba(0,0,0,.5);

}

.options>.selected{

background-color:#2e6bc7;

color: #fff;

line-height: 40px;

padding-left: 10px;

 

}

.select_text>p{

padding-left: 10px;

line-height: 40px;

float: left;

}

.select_icon{

float: right;

height: 40px;

padding: 0 20px;

}

.select_icon>div{

width: 10px;

height: 10px;

border-left: 1px solid #fff;

border-bottom: 1px solid #fff;

transform: rotate(-45deg);

margin-top: 12px;

}

.options{

position: absolute;

width: 100%;

top: 40px;

background-color:rgba(0,0,0,.5);

border-top: 1px solid #000;

    border-bottom-left-radius:5px;

border-bottom-right-radius:5px;

display: none;

}

.option{

line-height: 40px;

padding-left: 10px;

color: #ffffff;

}

.option:hover{

background-color: #acacac;

cursor: pointer;

color: #fff;

}

@keyframes play{

0%{transform: scale(1,0);}

25%{transform: scale(1,1.2);}

50%{transform: scale(1,0.85);}

75%{transform: scale(1,1.05);}

100%{transform: scale(1,1);}

}

.open>.options{

display: block;

z-index: 999;

transform-origin: 50% 0;

animation: play .5s ease-in;

}

.open>.select_text>.select_icon>div{

margin-top: 18px;

transform: rotate(135deg);

}

.open>.select_text{

border-bottom-left-radius:0px;

border-bottom-right-radius:0px;

}


HTML：