Styling Search Input boxes

You can pass a class to style the input boxes. The property to pass the class is search-input-class.

<v-multiselect-listbox :options="[{label: 'Alabama', code: 'al'}, {label: 'California', code: 'cal'}]"
                       :reduce-display-property="(option) => option.label"
                       :reduce-value-property="(option) => option.code"
                       search-input-class="custom-input-class">
</v-multiselect-listbox>

SCSS Variables

SCSS variables are used in most of the component styles. You can check the complete styling in src/scss. The variables listed below can be found at src/scss/_variables (opens new window).

// Searchable listbox
$msl-multi-select-items-box-border-color: #5b5d66 !default;
$msl-multi-select-items-box-disabled-border-color: #d2d2d2 !default;
$msl-multi-select-item-border-bottom-color: #252b45 !default;
$msl-multi-select-item-hover-bg: #3858e7 !default;
$msl-multi-select-item-hover-font-color: #fff !default;
$msl-multi-select-no-item-font-color: #c0c2c6 !default;

// The select all icons
$msl-multi-select-action-hover-font-color: #c0c2c6 !default;
$msl-multi-select-action-icon-font-color: #919191 !default;

All variables are implemented with !default in order to make them easier to override in your application.