body,div,p,img,a,table,tr,td,h1,h2,h3,h4,ul,li,dl,dd,dt,input,form,video,b,em { padding:0; margin:0; } body { color:#333; font-family:"Microsoft YaHei"; height:100%; font-size:12px } a { text-decoration:none; } ul,li { list-style-type:none; } img { border:0; display:block; width:100%; } em,i { font-style:normal; } .over { overflow:hidden; } .fl { float:left; } .fr { float:right; } .re { position:relative; } .fx { position:fixed; } /* 滚动条样式 */::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-thumb { border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; background-color:#c3c3c3; } ::-webkit-scrollbar-track { background-color:transparent; } /* 滚动条样式End */ .chooseZh { padding-top:30px; } .right { width:80%; border:1px solid #e6e6e6; border-radius:5px; padding:5px 0 0; margin:auto; } .defaultSpan { display:inline-block; height:26px; line-height:26px; margin-bottom:5px; margin-left:5px; } .groupSpan { float:left; width:90%; margin-left:5px; overflow-x:hidden; overflow-y:auto; max-height:150px; } .item { background:aliceblue; border-radius:5px; padding:5px; margin-right:5px; margin-bottom:5px; } .delG { width:15px; height:15px; margin-left:3px; border:1px solid #e6e6e6; border-radius:50%; background-color:#f2f2f2; } .clear { width:15px; height:15px; margin-right:5px; margin-top:6px; } .pull { width:15px; height:15px; margin-top:6px; margin-right:5px; } .pullItem { overflow-x:hidden; overflow-y:auto; width:80%; margin:auto; max-height:150px; margin-bottom:10px; border:1px solid #e6e6e6; border-top:none; border-radius:0 0 5px 5px; } .pullItem p { height:30px; line-height:30px; padding:0 5px; } .pullItem p:HOVER { background-color:cornflowerblue; color:white; }
在做项目的过程中,需要批量操作的,但是又要把选中的显示出来,又非让用select那样显示的,所以就写了这个东西,相当于自定义的一个下拉框,实现了多选的功能