.SlectBox { width: 198px; border-radius:60px;padding: 0 15px;cursor:pointer;} /*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 { border: 1px solid #F1C936 !important; box-shadow: 0 0 4px #F4ECCF !important;} .SumoSelect:focus:after { opacity:1; } .SumoSelect:after { opacity: 0; content: ''; position: absolute; width: 234px; border-radius: 34px; left: -2px; top: 2px; background: #F4ECCF; transition: opacity 0.2s ease; height: 46px; z-index: 0; } .SumoSelect:hover > .CaptionCont { border: 1px solid #b5b5b5; color:#252525;} .SumoSelect > .CaptionCont { z-index:2;position: relative; border: 1px solid #D1D1D1;transition:all 0.3s ease; min-height: 14px; background-color: #fff;margin:4px 0px;} .SumoSelect > .CaptionCont > span { display: block; padding-right: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #252525; font-family: 'Open Sans',sans-serif; font-style: normal; font-size: 13px; line-height: 40px; } /*placeholder style*/ .SumoSelect > .CaptionCont > span.placeholder { color: #7D7D7D; font-family: 'Open Sans',sans-serif; font-style: normal; font-size: 13px; line-height: 40px;} .SumoSelect > .CaptionCont > label { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 30px;} .SumoSelect:focus > .CaptionCont > label > i { border-top: 5px solid #f4d561; } .SumoSelect > .CaptionCont > label > i { display: block; border: 5px solid rgba(0, 0, 0, 0); width: 0px; height: 0px; border-top: 5px solid #D1D1D1; position: absolute; top: 3px; left: -15px; right: 0px; bottom: 0px; margin: auto; background-repeat: no-repeat; opacity: 0.8; } .SumoSelect > .optWrapper { top: 49px; width: 205px; position: absolute; left: 13px; opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -webkit-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -moz-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -ms-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -o-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: -100; background: #fff; border: 1px solid #F1C936; border-radius: 0px;overflow: hidden;} .SumoSelect > .optWrapper.open { top: 49px; visibility: visible; opacity: 1; z-index: 1000; } .SumoSelect > .optWrapper > .options { list-style: none; display: block; padding:10px 0px; margin: 0px; overflow: auto; border-radius: 2px; /*Set the height of pop up here (only for desktop mode)*/ max-height: 500px; /*height*/ } .SumoSelect > .optWrapper.isFloating > .options {max-height: 100%;} .SumoSelect > .optWrapper > .options > li {transition:all 0.3s ease; position: relative; line-height: 32px; padding: 0 0 0 20px; margin-bottom: 4px; cursor: pointer; } .SumoSelect > .optWrapper > .options > li:first-child { border-radius: 2px 2px 0px 0px; } .SumoSelect > .optWrapper > .options > li:last-child { border-bottom: none; border-radius: 0px 0px 2px 2px; } .SumoSelect > .optWrapper > .options > li:hover { background-color: #fff7d9; } .SumoSelect > .optWrapper > .options > li.selected{background-color: #fff7d9;} .SumoSelect > .optWrapper > .options > li label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; font-size: 13px; font-family: 'Open sans',sans-serif; color: #252525; cursor: pointer; } .SumoSelect > .optWrapper > .options > li span { display: none; } /*Floating styles*/ .SumoSelect > .optWrapper.isFloating { position: fixed; top: 0px; left: 0px; right: 0px; width: 90%; bottom: 0px; margin: auto; max-height: 90%; } /*Hover*/ /*.SumoSelect:hover > .CaptionCont > label { background-color: #F1F1F1; }*/ /*disabled state*/ .SumoSelect > .optWrapper > .options > li.disabled { background-color: inherit;pointer-events: none;} .SumoSelect > .optWrapper > .options > li.disabled * { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; } /*styling for multiple select*/ .SumoSelect > .optWrapper.multiple > .options > li { line-height: 32px; padding: 0 0 0 20px; margin-bottom: 4px; cursor:pointer; } .SumoSelect > .optWrapper.multiple > .options > li span, .SumoSelect .select-all > span{position:absolute;display: none;;width:30px;top:0px;bottom:0px;margin-left:-35px;} .SumoSelect > .optWrapper.multiple > .options > li span i, .SumoSelect .select-all > span i{position: absolute;margin: auto;left: 0px;right: 0px;top: 0px;bottom: 0px;width: 14px;height: 14px;border: 1px solid #AEAEAE;border-radius: 2px;box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);background-color: #fff;} .SumoSelect > .optWrapper > .MultiControls { display: none; border-top: 1px solid #ddd; background-color: #fff; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.13); border-radius: 0px 0px 3px 3px; } .SumoSelect > .optWrapper.multiple.isFloating > .MultiControls { display: block; margin-top: 5px; position: absolute; bottom: 0px; width: 100%; } .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls { display: block; } .SumoSelect > .optWrapper.multiple.okCancelInMulti > .MultiControls > p { padding: 6px; } .SumoSelect > .optWrapper.multiple > .MultiControls > p { display: inline-block; cursor: pointer; padding: 12px; width: 50%; box-sizing: border-box; text-align: center; } .SumoSelect > .optWrapper.multiple > .MultiControls > p:hover { background-color: #f1f1f1; } .SumoSelect > .optWrapper.multiple > .MultiControls > p.btnOk { border-right: 1px solid #DBDBDB; border-radius: 0px 0px 0px 3px; } .SumoSelect > .optWrapper.multiple > .MultiControls > p.btnCancel { border-radius: 0px 0px 3px 0px; } /*styling for select on popup mode*/ .SumoSelect > .optWrapper.isFloating > .options > li { padding: 12px 6px; } /*styling for only multiple select on popup mode*/ .SumoSelect > .optWrapper.multiple.isFloating > .options > li { padding-left: 35px; } .SumoSelect > .optWrapper.multiple.isFloating { padding-bottom: 43px; } /*selected state .SumoSelect > .optWrapper.multiple > .options > li.selected span i:after, .SumoSelect .select-all.selected > span i:after{content: '';position: absolute;width: 11px;height: 11px;top: 2px;left: 2px;background-color: rgb(17, 169, 17);border-radius: 2px;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);} */ .SumoSelect > .optWrapper.multiple > .options > li.selected span i, .SumoSelect .select-all.selected > span i, .SumoSelect .select-all.partial > span i{background-color: rgb(17, 169, 17);box-shadow: none;border-color: transparent;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');background-repeat: no-repeat;background-position: center center;} /*disabled state*/ .SumoSelect.disabled { opacity: 0.7;cursor: not-allowed;} .SumoSelect.disabled > .CaptionCont{border-color:#ccc;box-shadow:none;} /**Select all button**/ .SumoSelect .select-all{border-radius: 3px 3px 0px 0px;position: relative;border-bottom: 1px solid #ddd;background-color: #fff;padding: 8px 0px 3px 35px;height: 20px;} .SumoSelect .select-all > span i{cursor:pointer;} .SumoSelect .select-all.partial > span i{background-color:#ccc;} /*styling for optgroups*/ .SumoSelect > .optWrapper > .options > li.optGroup { padding-left: 5px; text-decoration: underline; }