做毕设果然是道阻且长QAQ，在用到一个复选框的时候由于嫌弃复选框实在太丑了，就自己做了一个。其中没有用到任何图片，用css和jQuery实现。
废话不多说直接看最后效果：
html元素的设计如下：
<form action="" method="post">
<div class="multi-select">
<input name="welfare" class="in" readonly="readonly" />
<div class="triangle"></div>
</div>
<ul class="multi-select-sub" style="display: none;">
<li class="multi-select-ele">test1<div class="not-display-check"></div></li>
<li class="multi-select-ele">test2<div class="not-display-check"></div></li>
<li class="multi-select-ele">test3<div class="not-display-check"></div></li>
<li class="multi-select-ele">test4<div class="not-display-check"></div></li>
</ul>
</form><input/> 设置为只读，不允许用户输入，最终选择结果会显示在输入框中，如果选择的内容很多，建议直接使用<textarea>。
小三角的实现在之前做提示框的时候就详细说明过了，主要是设置width和height为0，用一条边的边框就可以模拟。
对勾的实现与小三角的思想类似：通过不同的高宽，同时设置两条相邻的边为透明，在进行旋转就可以得到一个类似对勾。
css代码如下：
.triangle {
display: inline-block;
width: 0;
height: 0;
border: 10px solid #808080;
border-color: #808080 transparent transparent transparent;
position: absolute;
top: 10px;
right: 8px;
}
div.display-check {
position: absolute;
right: 10px;
top: 10px;
width: 10px;
height: 3px;
border: 5px solid black;
border-color: transparent transparent #AAA #AAA;
border-radius: 10px;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-moz-transform:rotate(-45deg); /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg); /* Opera */
} 整个复选框的交互都由jQuery来实现，具体完整代码如下：
<!DOCTYPE html>
<html>
<head>
<title>jquery下拉选择框</title>
<style type="text/css">
/* 多选输入显示框样式 */
.multi-select {
margin-top: 20px;
position: relative;
width: 300px;
}
input.in {
display: inline-block;
box-sizing: border-box;
height: 30px;
width: 300px;
outline: none;
/* border: none; */
}
input.in:focus {
outline: none;
}
.triangle {
display: inline-block;
width: 0;
height: 0;
border: 10px solid #808080;
border-color: #808080 transparent transparent transparent;
position: absolute;
top: 10px;
right: 8px;
}
.rotate-180 {
transform-origin:center 25%; //旋转中心正中间
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transition: transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
}
.rotate180 {
transform-origin:center 25%;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transition: transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-o-transition: -o-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
}
/* 多选下拉框样式 */
ul.multi-select-sub {
list-style-type: none;
border: 1px solid #AAA;
box-sizing: border-box;
width: 300px;
margin-top: -2px;
padding: 0px;
}
li {
padding: 10px;
box-sizing: border-box;
width: 100%;
position: relative;
}
li:hover {
background-color: #56718F;
}
/* 显示对勾 */
div.display-check {
position: absolute;
right: 10px;
top: 10px;
width: 10px;
height: 3px;
border: 5px solid black;
border-color: transparent transparent #AAA #AAA;
border-radius: 10px;
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-moz-transform:rotate(-45deg); /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg); /* Opera */
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var welfareArr = [];
$(".multi-select").click(function(event) {
/* 小箭头旋转 */
if($(".triangle").hasClass('rotate180')) {
$(".triangle").removeClass('rotate180');
$(".triangle").addClass('rotate-180');
}
else if($(".triangle").hasClass('rotate-180')) {
$(".triangle").removeClass('rotate-180');
$(".triangle").addClass('rotate180');
}
else {
$(".triangle").addClass('rotate-180');
}
/* 显示下拉框 */
if($(".multi-select-sub").css('display') == "none"){
$(".multi-select-sub").css('display', 'block');
}
else {
$(".multi-select-sub").css('display', 'none');
}
});
$("li.multi-select-ele").click(function(event) {
// 当元素已经被选取过了，再次点击即取消选取
if($(this).hasClass('selected')){
// 设置元素className
$(this).removeClass('selected');
// 隐藏表示选中的原点
$(this).find('.display-check').attr("class", "not-display-check");
// 从数组中删除对应元素
// 按照常理，列表中的内容应该都是不一致的，所以这里简单的根据内容删除
welfareArr.splice($.inArray($(this).text(), welfareArr), 1);
}
else{
$(this).addClass('selected');
$(this).find(".not-display-check").attr("class", "display-check");
welfareArr.push($(this).text());
}
$("input.in").val(welfareArr.join(','));
});
});
</script>
</head>
<body>
<form action="" method="post">
<div class="multi-select">
<input name="welfare" class="in" readonly="readonly" />
<div class="triangle"></div>
</div>
<ul class="multi-select-sub" style="display: none;">
<li class="multi-select-ele">test1<div class="not-display-check"></div></li>
<li class="multi-select-ele">test2<div class="not-display-check"></div></li>
<li class="multi-select-ele">test3<div class="not-display-check"></div></li>
<li class="multi-select-ele">test4<div class="not-display-check"></div></li>
</ul>
</form>
</body>
</html>