//自定义select，使用到了伪类，利用border制作小三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
<title>select</title>
<style type="text/css">
*{margin: 0; padding: 0;}
.box{ 222px; margin: 50px auto;}
p{ 200px; border: 1px solid #ccc; height: 50px; line-height: 50px; padding: 0 10px; position: relative;}
p:after{ 0; height: 0; content: ''; display: block; position: absolute; right: 6px; top: 50%; margin-top: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #505050;}
ul{ 222px; display: none; height: 120px; overflow: hidden; overflow-y: scroll;}
li{ 200px; padding: 0 10px; border: 1px solid #CCCCCC; height: 50px; line-height: 50px; list-style: none;}
</style>
</head>
<body>
<div class="box">
<p>上海</p>
<ul>
<li>北京</li>
<li>天津</li>
<li>广州</li>
<li>安庆</li>
<li>合肥</li>
</ul>
</div>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$('p').click(function(){
$('ul').show();
})
$('li').click(function(){
$('p').html($(this).html());
$('ul').hide();
})
})
</script>
</body>
</html>