自定义样式下拉菜单-1
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title> 自定义样式下拉菜单1 </title>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<style>
body{background:lavender;margin:30px;}
.f_group{position:relative;font-size:16px;}
.f_group .f_select{width:300px;height:45px;position:absolute;left:0;top:0px;background:#fafafa;border:1px solid #ccc;border-radius:5px;padding:5px 0 5px 10px;box-sizing:border-box;line-height: 30px}
.f_group .cur_select{display:inline-block;background:#fafafa url(downselect.png) no-repeat right !important;}
.f_group .downselect{opacity:0;filter:alpha(opacity:0;);}
</style>
</head>
<body>
<h2>自定义样式下拉菜单1</h2>
<div class="f_group">
<span class="f_select cur_select" id="cur-select">星期一</span>
<select class="f_select downselect" id="borrowtype">
<option value="1">星期一</option>
<option value="2">星期二</option>
<option value="3">星期三</option>
<option value="4">星期四</option>
<option value="5">星期五</option>
</select>
</div>
<script>
$('#borrowtype').on('change',function(){
$('#cur-select').html($('#borrowtype option:selected').text());
});
</script>
</body>
</html>自定义样式下拉菜单-2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定义样式下拉菜单2</title>
<style>
body{background:lavender;margin:30px;}
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none; /*for chrome*/
}
.styled-select {
border:1px solid #333;
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.jpg) no-repeat right #ddd;
}
</style>
</head>
<body>
<h2>自定义样式下拉菜单2</h2>
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
<script>
</script>
</body>
</html>总结：个人觉得第一种方法较好。