react-bootstrap-select-dropdown/dist/css/bootstrap-select.min.css

A custom Bootstrap select / multiselect using dropdown button, designed to behave like regular select form control. Bootstrap Select/Multiselect developed to use with **React 16+** and **Bootstrap 4**.

@keyframes bs-notify-fadeOut{0%{opacity:.9}100%{opacity:0}}select.bs-select-hidden,.hk--custom--select>select.bs-select-hidden,select.selectpicker{display:none !important}.hk--custom--select{width:220px \0 ;vertical-align:middle}.hk--custom--select>.dropdown-toggle{position:relative;width:100%;text-align:right;white-space:nowrap;display:inline-flex;align-items:center;justify-content:space-between}.hk--custom--select>.dropdown-toggle:after{margin-top:-1px}.hk--custom--select>.dropdown-toggle.bs-placeholder,.hk--custom--select>.dropdown-toggle.bs-placeholder:hover,.hk--custom--select>.dropdown-toggle.bs-placeholder:focus,.hk--custom--select>.dropdown-toggle.bs-placeholder:active{color:#999}.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-primary,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-primary:hover,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-primary:focus,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-primary:active,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-secondary,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-secondary:hover,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-secondary:focus,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-secondary:active,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-success,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-success:hover,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-success:focus,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-success:active,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-danger,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-danger:hover,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-danger:focus,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-danger:active,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-info,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-info:hover,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-info:focus,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-info:active,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-dark,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-dark:hover,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-dark:focus,.hk--custom--select>.dropdown-toggle.bs-placeholder.btn-dark:active{color:rgba(255,255,255,.5)}.hk--custom--select>select{position:absolute !important;bottom:0;left:50%;display:block !important;width:.5px !important;height:100% !important;padding:0 !important;opacity:0 !important;border:none;z-index:0 !important}.hk--custom--select>select.mobile-device{top:0;left:0;display:block !important;width:100% !important;z-index:2 !important}.has-error .hk--custom--select .dropdown-toggle,.error .hk--custom--select .dropdown-toggle,.hk--custom--select.is-invalid .dropdown-toggle,.was-validated .hk--custom--select select:invalid+.dropdown-toggle{border-color:#b94a48}.hk--custom--select.is-valid .dropdown-toggle,.was-validated .hk--custom--select select:valid+.dropdown-toggle{border-color:#28a745}.hk--custom--select.fit-width{width:auto !important}.hk--custom--select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){width:220px}.hk--custom--select.form-control{margin-bottom:0;padding:0;border:none;height:auto}:not(.input-group)>.hk--custom--select.form-control:not([class*=col-]){width:100%}.hk--custom--select.form-control.input-group-btn{float:none;z-index:auto}.form-inline .hk--custom--select,.form-inline .hk--custom--select.form-control:not([class*=col-]){width:auto}.hk--custom--select:not(.input-group-btn),.hk--custom--select[class*=col-]{float:none;display:inline-block;margin-left:0}.hk--custom--select.dropdown-menu-right,.hk--custom--select[class*=col-].dropdown-menu-right,.row .hk--custom--select[class*=col-].dropdown-menu-right{float:right}.form-inline .hk--custom--select,.form-horizontal .hk--custom--select,.form-group .hk--custom--select{margin-bottom:0}.form-group-lg .hk--custom--select.form-control,.form-group-sm .hk--custom--select.form-control{padding:0}.form-group-lg .hk--custom--select.form-control .dropdown-toggle,.form-group-sm .hk--custom--select.form-control .dropdown-toggle{height:100%;font-size:inherit;line-height:inherit;border-radius:inherit}.hk--custom--select.form-control-sm .dropdown-toggle,.hk--custom--select.form-control-lg .dropdown-toggle{font-size:inherit;line-height:inherit;border-radius:inherit}.hk--custom--select.form-control-sm .dropdown-toggle{padding:.25rem .5rem}.hk--custom--select.form-control-lg .dropdown-toggle{padding:.5rem 1rem}.form-inline .hk--custom--select .form-control{width:100%}.hk--custom--select.disabled,.hk--custom--select>.disabled{cursor:not-allowed}.hk--custom--select.disabled:hover,.hk--custom--select>.disabled:hover{box-shadow:none !important}.hk--custom--select.disabled:focus,.hk--custom--select>.disabled:focus{outline:none !important;box-shadow:none !important}.hk--custom--select.bs-container{position:absolute;top:0;left:0;height:0 !important;padding:0 !important}.hk--custom--select.bs-container .dropdown-menu{z-index:1060}.hk--custom--select .dropdown-toggle .filter-option{position:static;top:0;left:0;float:left;height:100%;width:100%;text-align:left;overflow:hidden;flex:0 1 auto}.bs3.hk--custom--select .dropdown-toggle .filter-option{padding-right:inherit}.input-group .bs3-has-addon.hk--custom--select .dropdown-toggle .filter-option{position:absolute;padding-top:inherit;padding-bottom:inherit;padding-left:inherit;float:none}.input-group .bs3-has-addon.hk--custom--select .dropdown-toggle .filter-option .filter-option-inner{padding-right:inherit}.hk--custom--select .dropdown-toggle .filter-option-inner-inner{overflow:hidden}.hk--custom--select .dropdown-toggle .filter-expand{width:0 !important;float:left;opacity:0 !important;overflow:hidden}.hk--custom--select .dropdown-toggle .caret{position:absolute;top:50%;right:12px;margin-top:-2px;vertical-align:middle}.input-group .hk--custom--select.form-control .dropdown-toggle{border-radius:inherit}.hk--custom--select[class*=col-] .dropdown-toggle{width:100%}.hk--custom--select .dropdown-menu{min-width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.hk--custom--select .dropdown-menu>.inner:focus{outline:none !important}.hk--custom--select .dropdown-menu.inner{position:static;float:none;border:0;padding:0;margin:0;border-radius:0;box-shadow:none}.hk--custom--select .dropdown-menu li{position:relative}.hk--custom--select .dropdown-menu li.active small{color:rgba(255,255,255,.5) !important}.hk--custom--select .dropdown-menu li.disabled a{font-style:italic;cursor:not-allowed}.hk--custom--select .dropdown-menu li a{cursor:pointer;user-select:none}.hk--custom--select .dropdown-menu li a.opt{position:relative;padding-left:2.25em}.hk--custom--select .dropdown-menu li a span.check-mark{display:none}.hk--custom--select .dropdown-menu li a span.text{display:inline-block}.hk--custom--select .dropdown-menu li small{padding-left:.5em}.hk--custom--select .dropdown-menu .notify{position:absolute;bottom:5px;width:96%;margin:0 2%;min-height:26px;padding:3px 5px;background:#f5f5f5;border:1px solid #e3e3e3;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);pointer-events:none;opacity:.9;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.hk--custom--select .dropdown-menu .notify.fadeOut{animation:300ms linear 750ms forwards bs-notify-fadeOut}.hk--custom--select .no-results{padding:3px;background:#f5f5f5;margin:0 5px;white-space:nowrap}.hk--custom--select.fit-width .dropdown-toggle .filter-option{position:static;display:inline;padding:0}.hk--custom--select.fit-width .dropdown-toggle .filter-option-inner,.hk--custom--select.fit-width .dropdown-toggle .filter-option-inner-inner{display:inline}.hk--custom--select.fit-width .dropdown-toggle .bs-caret:before{content:" "}.hk--custom--select.fit-width .dropdown-toggle .caret{position:static;top:auto;margin-top:-1px}.hk--custom--select.show-tick .dropdown-menu .selected span.check-mark{position:absolute;display:inline-block;right:15px;top:7px}.hk--custom--select.show-tick .dropdown-menu .selected span.check-mark:after{content:"";display:block;width:.5em;height:1em;border-style:solid;border-width:0 4px 4px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.hk--custom--select.show-tick .dropdown-menu li a span.text{margin-right:34px}.hk--custom--select .bs-ok-default:after{content:"";display:block;width:.5em;height:1em;border-style:solid;border-width:0 .26em .26em 0;transform:rotate(45deg)}.hk--custom--select.show-menu-arrow.open>.dropdown-toggle,.hk--custom--select.show-menu-arrow.show>.dropdown-toggle{z-index:1061}.hk--custom--select.show-menu-arrow .dropdown-toggle .filter-option:before{content:"";border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid rgba(204,204,204,.2);position:absolute;bottom:-4px;left:9px;display:none}.hk--custom--select.show-menu-arrow .dropdown-toggle .filter-option:after{content:"";border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;bottom:-4px;left:10px;display:none}.hk--custom--select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before{bottom:auto;top:-4px;border-top:7px solid rgba(204,204,204,.2);border-bottom:0}.hk--custom--select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after{bottom:auto;top:-4px;border-top:6px solid #fff;border-bottom:0}.hk--custom--select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before{right:12px;left:auto}.hk--custom--select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after{right:13px;left:auto}.hk--custom--select.show-menu-arrow.open>.dropdown-toggle .filter-option:before,.hk--custom--select.show-menu-arrow.open>.dropdown-toggle .filter-option:after,.hk--custom--select.show-menu-arrow.show>.dropdown-toggle .filter-option:before,.hk--custom--select.show-menu-arrow.show>.dropdown-toggle .filter-option:after{display:block}.bs-searchbox,.bs-actionsbox,.bs-donebutton{padding:8px}.bs-actionsbox{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-actionsbox .btn-group button{width:50%}.bs-donebutton{float:left;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-donebutton .btn-group button{width:100%}.bs-searchbox .form-control{margin-bottom:0;width:100%;float:none}