下拉框效果的多选框

html:

 1 <div id="selectBoard">
 2 　　<ul class="ul_sel" id="ul_input">
 3 　　　　<li><input type="checkbox" name="dep" id="" value="安监局" /> 安监局li>
 4　　　　 <li><input type="checkbox" name="dep" id="" value="卫计局" /> 卫计局li>
 5 　　　　<li><input type="checkbox" name="dep" id="" value="烟草专卖局" /> 烟草专卖局li>
 6 　　　　<li><input type="checkbox" name="dep" id="" value="档案局" /> 档案局li>
 7 　　　　<li><input type="checkbox" name="dep" id="" value="地税局" /> 地税局li>
 8　　 ul>
 9 　　<input type="text" id="span_dep" style="font-size:1.1em;border:none;color:white;width:97%;" onfocus="this.blur()" placeholder="请选择相关部门" />
10 div>

css:

#selectBoard{
    width: 50%;
    height: 30px;
    border: 1px solid #7cf8ff;
    border-radius: 5px;
    position: relative;
    margin: 30px 50px;
    z-index:1000;
}

#selectBoard ul{
    width: 100%;
    background: white;
    position: absolute;
    top: 10px;
    left: -25px;
    border: 1px solid #7cf8ff;
    border-radius: 5px;
    display: none;
}

#selectBoard ul li{
    list-style: none;
    color:black;
}

#selectBoard ul li:hover{
    background: dodgerblue;
}

.ul_sel {
    height:160px;
    overflow-y: auto;
}
   
.ul_sel::-webkit-scrollbar {
    width: 6px;
    height: 1px;
}

.ul_sel::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #7cf8ff;
}

.ul_sel::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #09abeb;
}

js:

 

转载于:https://www.cnblogs.com/f-l-y/p/9186481.html