SumoSelect

by Irvin Dominin

HTML

<select id="island" multiple>
    <option value="Big Island">Big Island</option>
    <option value="Oahu">Oahu</option>
    <option value="Kauai">Kauai</option>
    <option value="Maui">Maui</option>
</select>

CSS

.SlectBox {
    width: 200px;
    padding: 5px 8px;
}
/*this is applied on that hidden select. DO NOT USE display:none; or visiblity:hidden; and Do not override any of these properties. */
 .SelectClass {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
    width: 100%;
    border: none;
    z-index: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
.SumoSelect > .optWrapper > .options > li label, .SumoSelect > .CaptionCont {
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
}
.SumoSelect {
    display: inline-block;
    position: relative;
    outline:none;
}
.SumoSelect:focus > .CaptionCont, .SumoSelect:hover > .CaptionCont {
    box-shadow: 0px 0px 2px #7799D0;
    border-color: #7799D0;
}
.SumoSelect > .CaptionCont {
    position: relative;
    border: 1px solid #A4A4A4;
    min-height: 14px;
    background-color: #fff;
    border-radius:2px;
}
.SumoSelect > .CaptionCont > span {
    display: block;
    padding-right: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor:default;
}
/*placeholder style*/
 .SumoSelect > .CaptionCont > span.placeholder {
    color: #ccc;
    font-style: italic;
}
.SumoSelect > .CaptionCont > label {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 30px;
}
.SumoSelect > .CaptionCont > label > i {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII=');
    background-position:...

JavaScript

/*!
 * jquery.sumoselect - v2.1.0
 * http://hemantnegi.github.io/jquery.sumoselect
 */

!function(e){"namespace sumo";e.fn.SumoSelect=function(t){var l=e.extend({placeholder:"Select Here",csvDispCount:3,captionFormat:"{0} Selected",floatWidth:400,forceCustomRendering:!1,nativeOnDevice:["Android","BlackBerry","iPhone","iPad","iPod","Opera Mini","IEMobile","Silk"],outputAsCSV:!1,csvSepChar:",",okCancelInMulti:!1,triggerChangeCombined:!0,selectAll:!1,selectAlltext:"Select All"},t),s=this.each(function(){var t=this;!this.sumo&&e(this).is("select")&&(this.sumo={E:e(t),is_multi:e(t).attr("multiple"),select:"",caption:"",placeholder:"",optDiv:"",CaptionCont:"",is_floating:!1,is_opened:!1,mob:!1,Pstate:[],createElems:function(){var t=this;return t.E.wrap('<div class="SumoSelect" tabindex="0">'),t.select=t.E.parent(),t.caption=e("<span></span>"),t.CaptionCont=e('<p class="CaptionCont"><label><i></i></label></p>').addClass("SlectBox").attr("style",t.E.attr("style")).prepend(t.caption),t.select.append(t.CaptionCont),t.E.attr("disabled")&&t.select.addClass("disabled").removeAttr("tabindex"),l.outputAsCSV&&t.is_multi&&t.E.attr("name")&&(t.select.append(e('<input class="HEMANT123" type="hidden" />').attr("name",t.E.attr("name")).val(t.getSelStr())),t.E.removeAttr("name")),t.isMobile()&&!l.forceCustomRendering?void t.setNativeMobile():(t.E.hide(),t.optDiv=e('<div class="optWrapper">'),t.floatingList(),ul=e('<ul class="options">'),t.optDiv.append(ul),l.selectAll&&t.selAll(),e(t.E.children("option")).each(function(l,i){i=e(i),t.createLi(i)}),t.is_multi&&t.multiSelelect(),t.select.append(t.optDiv),t.basicEvents(),void t.selAllState())},createLi:function(t,l){var i=this;return t.attr("value")||t.attr("value",t.val()),li=e('<li...