因为项目上的需要,需要实现一个下拉框并且带有复选框功能,在网上找了找插件,没有找到合适的,所以就自己动手写了一个。写这个博客也相当于备份吧。
效果图如下:
这东西虽然没写过,但实际并不难所以也就没加什么注释了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-1.12.4.min.js"></script>
<style>
/* 下拉复选框开始 */
.multiple-parent label {
font-size: 16px;
}
.multiple-parent input[type='checkbox'] +label:before{
content: "";
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid rgba(0,222,255,1);
border-radius: 3px;
margin-right: 3px;
margin-left: 14px;
}
.multiple-parent input[type='checkbox']:checked + label:before{
background-color: #00DEFF;
content: "\2714";
text-align: center;
font-size: 12px;
color: #fff;
line-height: 13px;
}
.multiple-parent input[type="checkbox"]{
display: none;
}
.multiple-parent{
display: none;
width: 450px;
}
.multiple-parent ul{
list-style: none;
width:100%;
text-align: left;
border:1px solid rgba(11,212,255,.93);
border-radius:4px;
background:rgba(9,86,150,.27);
padding-left: 5px;
box-sizing: border-box;
height:230px;
overflow-x: hidden;
overflow-y: scroll;
}
/*滚动条样式*/
.multiple-parent ul::-