DashboardCode Multiselect Plugin for Bootstrap 5

Bootswatch Sketchy theme applied; additional adjusting is required:

// adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
$multiSelects.bsMultiSelect(
    cssPatch : { 
        picks_focus: {boxShadow:"0px 0px 0px 0.2rem rgba(51,51,51,0.25)" , borderColor:"#333"},
        picks_disabled: {backgroundColor: "#f7f7f9"},
        // theme breaks "text-primary bg-light" (used as hover on menu items) so I need to replace them with own styling
        choice_hover: { classes: "" /* remove default "text-primary bg-light" */,  styles: { backgroundColor: "rgb(168, 168, 168)"}},
        // theme suport only "old style" BS4 buttons and ignores BS5 close buttons
        pickButton: {backgroundImage: `url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>")`} 
    }
);

Bootswatch Materia theme applied; additional adjusting is required.

// adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
$multiSelects.bsMultiSelect(
    cssPatch: {
        picks_disabled: {backgroundColor: "transparent", color:"#ddd", borderColor: 'transparent'},
        picks_focus: { boxShadow: 'inset 0 -2px 0 #2196F3'},
        picks_focus_valid: {boxShadow: null},
        picks_focus_invalid: {boxShadow: null},
        picks: { boxShadow: 'inset 0 -1px 0 #ddd'} 
        // theme redefines color of close button on modals (so force us to fix it for BSMultiSelect)
        pickButton: {backgroundImage: `url("data:image/svg+xml, <svg> xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>")`} 
    }
);

Bootswatch Darkly theme applied; additional adjusting is required.

    // extrimely strange theme for BS5: "input fields" are dark; when disabled are grey. 
// adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
$multiSelects.bsMultiSelect(
    cssPatch: {
        picks_disabled: {backgroundColor:"rgb(235, 235, 235)"},
        pickButton: {filter: invert(.5)},
        picks_focus: {borderColor: '#739ac2', boxShadow: '0 0 0 0.2rem rgba(55, 90, 127, 0.25)'}
    }
);

Bootswatch Minty theme applied; additional adjusting is required:

// adjusting through cssPatch; altiernatively you can change values in BsMultiSelect.css (or link BsMultiSelect.scss)
$multiSelects.bsMultiSelect(
    cssPatch: {
        picks_disabled: {backgroundColor: "#f7f7f9", borderColor: '#d0eae2'},
        picks_focus: { borderColor: '#d0eae2', boxShadow: '0 0 0 0.2rem rgba(120,194,173,0.25)'},
        picks_focus_valid: {boxShadow: '0 0 0 0.2rem rgba(86,204,157,0.25)'},
        picks_focus_invalid: {boxShadow: '0 0 0 0.2rem rgba(255,120,81,0.25)'},
        pick: {color: 'black'}
    }
);

Horizontal Form / Disabled

BsMultiSelect

Input field

BsMultiSelect disabled

Disabled input

Form Row / Custom Validation

Valid input

Looks good!

Valid BsMultiSelect

Looks good!

Invalid input

Error!

Invald BsMultiSelect

Error!

Inline Form / Input groups

Input

:-)

BsMultiSelect

:-)

$('#myDropdown').on('hide.bs.dropdown', function (jqEvent) {
    if (jqEvent.clickEvent) {
        var target = jqEvent.clickEvent.target;
        var container = $('#bsMultiSelectOnDropdown').bsMultiSelect("GetContainer");
        if (container== target || $.contains(container, target))
            return false;
    }
})

Initiated with JavaScript Object

Over div

Over nested HTML (no flick)

Return to Github

BsMultiselect Multiselect Plugin for Bootstrap 5

BsMultiselect
Multiselect Plugin for Bootstrap 5