Customizing a multiple select is a very challenging task. The default layout of the multiple select box looks like this:

To make it a drop-down multiple select box we need to create a custom made multi select box.

Here is the html code:

<label class="multiple">
		<div class="multi">
			<div class="btn_toggle">
				<p class="clearfix">
					<span class="hida"></span>
				</p>
			</div>
			<ul class=""></ul>
		</div>
		
		<select>
			<option value="0">--Select States--</option>
			<option value="1">U.P.</option>
			<option value="2">Haryana</option>
			<option value="3">Uttarakhand</option>
			<option value="4">West Bengal</option>
			<option value="5">Punjab</option>
		</select>
	</label>

Here is the CSS code;

.multiple{min-height: 42px;height: auto ; margin: 50px auto; width: 360px; display: block;}
		.multiple select{display:none; }
		.multi{background-color:#fff; width: 100%; float: left;position: relative;border: 1px solid #ccc}
		.multi div{position: relative; border-bottom: none; padding:6px 30px 5px 6px; min-height: 36px;background: #fff url("/img/site/dropdown.png") no-repeat scroll right center; cursor: pointer;}
		.multi p{ padding:0 ;margin-bottom: 0; border-bottom: none;}	
		.multi p.hida{float: none;padding: 0;display: inline-block;margin: 2px 3px 3px 0;}
		.multi ul{display:none; list-style-type: none;position: absolute;left: 0; top: 100%; width: 100%; max-height: 172px; overflow-y:auto;overflow-x: hidden; background-color: #fff;z-index: 3;border: 1px solid #ccc;padding-left: 0}
		.multi ul li{border-bottom:1px solid #ccc;cursor:pointer; padding: 5px; background-color: transparent;}
		.multi ul li:last-child{border-bottom:none}
		.multi ul li:hover{background-color: #ff8000; color: #fff}
		.selected{background-color: #e0e0e0;border: 1px solid #ccc;color: rgba(0, 0, 0, 0.6);font-weight: 600; border-radius: 15px;padding: 2px 3px; margin: 3px 3px 3px 0;  font-size: 9px; text-transform: capitalize;}
		.selected.delete_icon{margin-left: 3px;cursor: pointer;; font-size: 9px;}
		.selected.delete_icon:hover{color: #2D2D31}

And  here id the JQuery code:

		if ($(".multiple").find("ul li").length==0) {
			var opt = $(".multiple").find("select option");
			console.log("opt"+opt.length);
			$(".hida").text(opt[0].text);
			for (var i = 1; i < opt.length; i++) {
				$("ul").append('<li data-value="'+ opt[i].text +'">'+ opt[i].text +'</li>');
			}
		}
		

Now what i have done is after the document gets ready or loaded, firstly I have copied the all the options of the select box and added these value to a UL list.

Through CSS i have made them invisible on page load.

$(".btn_toggle").on("click",function(event){
			event.preventDefault();
			if(event.target.nodeName != 'I' && event.target.nodeName != "SPAN"){
				var a = $(this);
				if (a.siblings("ul").is(':hidden')){
					$('.btn_toggle').siblings("ul").slideUp();
					a.siblings("ul").slideDown();
				}
				else
					a.siblings("ul").slideUp();	
			}
		});

Now when the user clicks the div.btn_toggle a drop-down list is opened. This list contains the options of the select box.

$(document).on("click","ul li",function(){
	    	var  title = $(this).text() ;
	    	var span = "<span class='selected' title='"+ title +"'>"+title+"<i class='delete_icon glyphicon glyphicon-remove'></i></span>";
	    	$(this).css("display","none");
	        $(this).parents(".multi").find("p").append(span);
	        $(this).parents(".multi").find(".hida").hide();
		});

Now when the user clicks on an option the current option is added in an empty area and the selected option is removed from the list.

$(document).on("click",".selected .delete_icon", function(event){
		  		event.stopPropagation();
		  		var parent = $(this).parents("p");
				
				$(this).parents(".multi").find('li[data-value="'+ $(this).parent().text() +'"]').css("display","block");
	    		sortList($(this).parents(".multi").find("ul"));
	    		$(this).parent().remove();
	    		if (!parent.find("span").hasClass("selected")) {
	    			parent.find(".hida").html(parent.data('for')).show();
	    		}
		  });

In order to remove the selected options from the div user can click on the "X" symbol available on every option selected.

function sortList(e){
		  	var mylist = e;
			var listitems = mylist.children('li').get();
			listitems.sort(function(a, b) {
			   var compA = $(a).text().toUpperCase();
			   var compB = $(b).text().toUpperCase();
			   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
			});
			$.each(listitems, function(idx, itm) { mylist.append(itm); });
		}

This function put the list in a sorted way.

Here is the complete JS Code:

$(document).ready(function(){
		if ($(".multiple").find("ul li").length==0) {
			var opt = $(".multiple").find("select option");
			console.log("opt"+opt.length);
			$(".hida").text(opt[0].text);
			for (var i = 1; i < opt.length; i++) {
				$("ul").append('<li data-value="'+ opt[i].text +'">'+ opt[i].text +'</li>');
			}
		}
		$(".btn_toggle").on("click",function(event){
			event.preventDefault();
			if(event.target.nodeName != 'I' && event.target.nodeName != "SPAN"){
				var a = $(this);
				if (a.siblings("ul").is(':hidden')){
					$('.btn_toggle').siblings("ul").slideUp();
					a.siblings("ul").slideDown();
				}
				else
					a.siblings("ul").slideUp();	
			}
		});
		$(document).on('click touch', function (e) {
            var container = $(".btn_toggle");
            var container1 = $(".btn_toggle").siblings("ul");
            if (!container.is(e.target) && container.has(e.target).length === 0 && !container1.is(e.target) && container1.has(e.target).length === 0)
            {
                $('.btn_toggle').siblings("ul").slideUp();
            }
        });
	  	
	  	$(document).on("click","ul li",function(){
	    	var  title = $(this).text() ;
	    	var span = "<span class='selected' title='"+ title +"'>"+title+"<i class='delete_icon glyphicon glyphicon-remove'></i></span>";
	    	$(this).css("display","none");
	        $(this).parents(".multi").find("p").append(span);
	        $(this).parents(".multi").find(".hida").hide();
		});
		 $(document).on("click",".selected", function(event){
		  		event.stopPropagation();
		  });
		$(document).on("click",".selected .delete_icon", function(event){
		  		event.stopPropagation();
		  		var parent = $(this).parents("p");
				
				$(this).parents(".multi").find('li[data-value="'+ $(this).parent().text() +'"]').css("display","block");
	    		sortList($(this).parents(".multi").find("ul"));
	    		$(this).parent().remove();
	    		if (!parent.find("span").hasClass("selected")) {
	    			parent.find(".hida").html(parent.data('for')).show();
	    		}
		  });
			function sortList(e){
		  	var mylist = e;
			var listitems = mylist.children('li').get();
			listitems.sort(function(a, b) {
			   var compA = $(a).text().toUpperCase();
			   var compB = $(b).text().toUpperCase();
			   return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
			});
			$.each(listitems, function(idx, itm) { mylist.append(itm); });
		}
	});

Here is the JSFIDDLE link: https://jsfiddle.net/snn5yt8q/3/