Selec multiple

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/multiple-select/master/jquery.multiple.select.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/multiple-select/master/multiple-select.css">
<select name="sel-01" id="sel-01" class="select-multiple" multiple="multiple">
   
    <option value="AL" selected>Alabama</option>
    <option value="CA">California</option>
    <option value="NY">New York</option>
    <option value="TX">Texas</option>
    <option value="WY">Wyoming</option>
</select>

<select class="select-multiple" id="searchSelectedProjects" name="searchSelectedProjects" multiple="">
    <option value="ALL" selected="selected">All</option>
    <option value="ADEV15">ADEV15</option>
    <option value="ADST15">ADST15</option>
</select>

<br>
<button class="btn btn-default">get items</button>

CSS

.ms-parent{
	vertical-align:top;
	width: auto !important;
	min-width:160px;
	margin-bottom: 5px;
	zoom: 1;
    vertical-align: middle;
}

.ms-drop{
	width:auto;
    min-width:160px;
}
.ms-choice{
	min-width:120px;
	height:30px;
	padding:4px 6px;
	border:1px solid #ccc;
	border-radius:4px;
	right:-4px;
	line-height:30px;
}
.ms-choice > .placeholder {
    color: #aaa;
		padding-left:4px;
}

.ms-choice > div,
.ms-choice > div.open{
	background:#fefefe;
	width:24px;
	height:30px;
	border:1px solid #ccc;
	border-radius:0 4px 4px 0;

	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	
}
	.ms-choice > div:after {
	position:absolute;
	content:"\f0d7";
	width:20px;
	top:50%;
	 transform: translateY(-50%);
	 -webkit-transform:translateY(-50%);
	font-family:FontAwesome;
	font-size:14px;
	text-align:center;
}
.ms-choice > div.open:after{
	content:"\f0d8";
}

.ms-drop .ms-search input{
	border:1px solid #999;
	border-radius:4px;
	padding:4px;
	padding-left:20px;
	background:none;
	outline:0;	
}
.ms-drop .ms-search input:focus{
	box-shadow:0 5px 8px -4px rgba(3, 160, 250,.7);
	outline:0;
}
.ms-drop .ms-search:before{
	position:absolute;
	content:"\f002";
	color:#999;
	left:6px;
	line-height:30px;
	font-family:FontAwesome;
	font-size:14px;
	width:16px;
	text-align:center;

}

.ms-drop li input[type=checkbox], 
.ms-drop li...

JavaScript

$('.select-multiple').multipleSelect();