JQUERY+CSS 神夜下拉框美化代码

JQUERY+CSS 神夜下拉框美化代码

.syui-anim{-webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.syui-anim-up{ -webkit-animation-name:syui-up; animation-name: syui-up;}
@-webkit-keyframes syui-up { 
from {
	-webkit-transform:translate3d(0, 30px, 0);
	opacity:.3
}
to { -webkit-transform: translate3d(0, 0, 0); opacity: 1 }
}

.select{ position:relative; cursor:pointer; width:30%; min-width:220px;}
.select .icon-caret-down{ position:absolute; right:10px; top:5px; font-size:20px; color:#bbb; transition:all 0.3s ease;}
.select .icon-caret-down.on{ transform:rotate(180deg);}
.select dl{ position:absolute; padding:10px 0; width:100%; max-height:300px; overflow-y:auto; display:none; box-shadow:#eee 1px 2px 5px; top:36px; left:0px; background:#fff; z-index:11; border:1px solid #eee;}
.select dl dd{ display:block; cursor:pointer; transition:all 0.5s ease; color:#888; line-height:40px; padding-left:10px;}
.select dl dd:hover{ background:#f4f4f4; color:#666}
.select dl dd.selected{ background:#0194da; color:#fff;}

<div class="select"><i class="icon-caret-down"></i>
          <input type="hidden" name="role" value="1" class="inputval" />          
          <input type="text" readonly="readonly" placeholder="请选择角色" class="input" datatype="*" nullmsg="请选择角色"/>
          <dl class="select-value syui-anim syui-anim-up">
             <dd data="1" class=selected} >超级管理员</dd>            

           <dd data="2" >超级管理员</dd>

      </dl></div>

$(".select-value").prev().val($(".select-value dd[class=selected]").text());
	$(".select").click(function(){		
		$(this).find(".select-value").toggle();
		$(this).find(".icon-caret-down").toggleClass("on");		
	})	
	$(".select .select-value dd").click(function(){
		var data = $(this).attr("data");
		var text = $(this).text();
		$(this).addClass("selected").siblings().removeClass("selected");
		$(this).parent().parent().find(".input").val(text);
		$(this).parent().parent().find(".input").blur();
		$(this).parent().parent().find(".inputval").val(data);
	})