RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://coreui.io/bootstrap/docs/forms/multi-select/ below:

Website Navigation

Forms

Bootstrap Multi Select - extended examples and tutorials

Basic example

A straightforward demonstration of how to implement a basic Bootstrap Multi Select dropdown, highlighting essential attributes and configurations.

<select class="form-multi-select" id="ms1" multiple data-coreui-search="global">
  <option value="0">Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

<select class="form-multi-select" multiple data-coreui-search="true">
  <option value="0">Angular</option>
  <option value="1" disabled>Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4" disabled>Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Data source

Learn how to populate the multi-select component with data from various sources, including arrays and objects, for dynamic content integration.

Option elements

If you want to create a multi-select dropdown with predefined options, use the <option> elements inside the <select> tag.

<select class="form-multi-select" multiple data-coreui-search="true">
  <option value="0" selected>Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5" selected>Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Array data

To dynamically populate a multi-select dropdown with options from an array, start with an empty <select> element. Use JavaScript to add options programmatically. This allows for more flexible and dynamic content management.

<select id="multiSelect" name="multiSelect"></select>

We use the following JavaScript to set up our multi-select:

const myMultiSelect = document.getElementById('multiSelect')

if (myMultiSelect) {
  new coreui.MultiSelect(myMultiSelect, {
    name: 'multiSelect',
    options: [
      {
        label: 'frontend',
        options: [
          {
            value: 0,
            text: 'Angular'
          },
          {
            value: 1,
            text: 'Bootstrap',
            selected: true
          },
          {
            value: 2,
            text: 'React.js',
            selected: true
          },
          {
            value: 3,
            text: 'Vue.js'
          }
        ]
      },
      {
        label: 'backend',
        options: [
          {
            value: 4,
            text: 'Django'
          },
          {
            value: 5,
            text: 'Laravel'
          },
          {
            value: 6,
            text: 'Node.js',
            selected: true
          }
        ]
      }
    ],
    search: true
  })
}

You can configure the search functionality within the component. The data-coreui-search option determines how the search input element is enabled and behaves. It accepts multiple types to provide flexibility in configuring search behavior. By default is set to false.

<select class="form-multi-select" multiple>
  <option value="0">Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Standard search

To enable the default search input element with standard behavior, please add data-coreui-search="true" like in the example below:

<select class="form-multi-select" multiple data-coreui-search="true">
  <option value="0">Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Global search Added in v5.6.0

To enable the global search functionality within the Multi Select component, please add data-coreui-search="global". When data-coreui-search is set to 'global', the user can perform searches across the entire component, regardless of where their focus is within the component. This allows for a more flexible and intuitive search experience, ensuring the search input is recognized from any point within the component.

<select class="form-multi-select" multiple data-coreui-search="global">
  <option value="0">Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Selection types

Explore different selection modes, including single and multiple selections, allowing customization based on user requirements.

Text

If you want to enable users to select multiple options as text entries, add the data-coreui-selection-type="text". This configuration includes search functionality, making it easier to filter options by typing.

<select class="form-multi-select" id="multiple-select-text" multiple data-coreui-selection-type="text" data-coreui-search="true">
  <option value="0">Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Tag

If you want to display selected options as tags, add the data-coreui-selection-type="tags". This mode is useful for visually grouping selected items. The search functionality is also enabled for better user experience.

<select class="form-multi-select" id="multiple-select-tag" multiple data-coreui-selection-type="tags" data-coreui-search="true">
  <option value="0">Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Counter

If you prefer to show a counter indicating the number of selected options, add the data-coreui-selection-type="tags". This helps users keep track of their selections and includes search functionality for filtering options.

<select class="form-multi-select" id="multiple-select-counter" multiple data-coreui-selection-type="counter" data-coreui-search="true">
  <option value="0">Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Single Select

Add the data-coreui-multiple="false" boolean attribute to implement single-selection mode, enabling users to select only one option from the dropdown at a time.

<select class="form-multi-select" id="single-select" data-coreui-multiple="false">
  <option value="0">Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Disabled

Add the data-coreui-disabled="true" boolean attribute to give it a grayed out appearance, remove pointer events, and prevent focusing.

<select class="form-multi-select" id="ms1" multiple data-coreui-search="true"  data-coreui-disabled="true">
  <option value="0">Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Custom templates

The CoreUI Bootstrap Multi Select Component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the optionsTemplate, and for groups, you can use optionsGroupsTemplate, as demonstrated in the examples below:

<div class="row">
  <div class="col-md-6">
    <select id="myMultiSelectCountries" class="form-multi-select"></select>
  </div>
  <div class="col-md-6">
    <select id="myMultiSelectCountriesAndCities" class="form-multi-select"></select>
  </div>
</div>

We use the following JavaScript to set up our multi-select:

const myMultiSelectCountries = document.getElementById('myMultiSelectCountries')
const myMultiSelectCountriesAndCities = document.getElementById('myMultiSelectCountriesAndCities')

if (myMultiSelectCountries && myMultiSelectCountriesAndCities) {
  const countries = [
    {
      value: 'pl',
      text: 'Poland',
      flag: '🇵🇱'
    },
    {
      value: 'de',
      text: 'Germany',
      flag: '🇩🇪'
    },
    {
      value: 'us',
      text: 'United States',
      flag: '🇺🇸'
    },
    {
      value: 'es',
      text: 'Spain',
      flag: '🇪🇸'
    },
    {
      value: 'gb',
      text: 'United Kingdom',
      flag: '🇬🇧'
    }
  ]

  const cities = [
    {
      label: 'United States',
      code: 'us',
      flag: '🇺🇸',
      options: [
        {
          value: 'au',
          text: 'Austin'
        },
        {
          value: 'ch',
          text: 'Chicago'
        },
        {
          value: 'la',
          text: 'Los Angeles'
        },
        {
          value: 'ny',
          text: 'New York'
        },
        {
          value: 'sa',
          text: 'San Jose'
        }
      ]
    },
    {
      label: 'United Kingdom',
      code: 'gb',
      flag: '🇬🇧',
      options: [
        {
          value: 'li',
          text: 'Liverpool'
        },
        {
          value: 'lo',
          text: 'London'
        },
        {
          value: 'ma',
          text: 'Manchester'
        }
      ]
    }
  ]

  new coreui.MultiSelect(myMultiSelectCountries, {
    cleaner: true,
    multiple: true,
    options: countries,
    optionsTemplate(option) {
      return `<div class="d-flex align-items-center gap-2"><span class="fs-5">${option.flag}</span><span>${option.text}</span></div>`
    },
    placeholder: 'Select countries',
    search: true,
    selectionType: 'tags'
  })

  new coreui.MultiSelect(myMultiSelectCountriesAndCities, {
    cleaner: true,
    multiple: true,
    options: cities,
    optionsGroupsTemplate(optionGroup) {
      return `<div class="d-flex align-items-center gap-2"><span class="text-body fs-5">${optionGroup.flag}</span><span>${optionGroup.label}</span></div>`
    },
    placeholder: 'Select cities',
    search: true,
    selectionType: 'tags'
  })
}

Sizing

You may also choose from small and large multi selects to match our similarly sized text inputs.

<div class="row">
  <div class="col-md-6">
    <select class="form-multi-select form-multi-select-lg mb-3" id="multiple-select-counter" data-coreui-selection-type="counter" data-coreui-search="true">
      <option value="0">Angular</option>
      <option value="1">Bootstrap</option>
      <option value="2">React.js</option>
      <option value="3">Vue.js</option>
      <optgroup label="backend">
        <option value="4">Django</option>
        <option value="5">Laravel</option>
        <option value="6">Node.js</option>
      </optgroup>
    </select>
    <select class="form-multi-select form-multi-select-sm" id="multiple-select-counter" data-coreui-selection-type="counter" data-coreui-search="true">
      <option value="0">Angular</option>
      <option value="1">Bootstrap</option>
      <option value="2">React.js</option>
      <option value="3">Vue.js</option>
      <optgroup label="backend">
        <option value="4">Django</option>
        <option value="5">Laravel</option>
        <option value="6">Node.js</option>
      </optgroup>
    </select>
  </div>
  <div class="col-md-6">
    <select class="form-multi-select form-multi-select-lg mb-3" id="multiple-select-counter" data-coreui-selection-type="tags" data-coreui-search="true">
      <option value="0">Angular</option>
      <option value="1">Bootstrap</option>
      <option value="2">React.js</option>
      <option value="3">Vue.js</option>
      <optgroup label="backend">
        <option value="4">Django</option>
        <option value="5">Laravel</option>
        <option value="6">Node.js</option>
      </optgroup>
    </select>
    <select class="form-multi-select form-multi-select-sm" id="multiple-select-counter" data-coreui-selection-type="tags" data-coreui-search="true">
      <option value="0">Angular</option>
      <option value="1">Bootstrap</option>
      <option value="2">React.js</option>
      <option value="3">Vue.js</option>
      <optgroup label="backend">
        <option value="4">Django</option>
        <option value="5">Laravel</option>
        <option value="6">Node.js</option>
      </optgroup>
    </select>
  </div>
</div>

Usage

Heads up! In our documentation, all examples show standard CoreUI implementation. If you are using a Bootstrap-compatible version of CoreUI, remember to use the following changes:

In the constructor, please use bootstrap instead of coreui. For example, new bootstrap.Alert(...) instead of new coreui.Alert(...)
In events, please use bs instead of coreui, for example close.bs.alert instead of close.coreui.alert
In data attributes, please use bs instead of coreui. For example, data-bs-toggle="..." instead of data-coreui-toggle="..."

Via data attributes

Add form-multi-select class to a select element.

<select class="form-multi-select" id="ms1" multiple data-coreui-search="true">
  <option value="0">Angular</option>
  <option value="1">Bootstrap</option>
  <option value="2">React.js</option>
  <option value="3">Vue.js</option>
  <optgroup label="backend">
    <option value="4">Django</option>
    <option value="5">Laravel</option>
    <option value="6">Node.js</option>
  </optgroup>
</select>

Via JavaScript

Call the time picker via JavaScript:

<select class="form-multi-select"></select>

const mulitSelectElementList = Array.prototype.slice.call(document.querySelectorAll('.form-multi-select'))
const mulitSelectList = mulitSelectElementList.map(mulitSelectEl => {
  return new coreui.MultiSelect(mulitSelectEl, {
    // options
  })
})

Options

Options can be passed using data attributes or JavaScript. To do this, append an option name to data-coreui-, such as data-coreui-animation="{value}". Remember to convert the case of the option name from “camelCase” to “kebab-case” when using data attributes. For instance, you should write data-coreui-custom-class="beautifier" rather than data-coreui-customClass="beautifier".

Starting with CoreUI 4.2.0, all components support an experimental reserved data attribute named data-coreui-config, which can contain simple component configurations as a JSON string. If an element has attributes data-coreui-config='{"delay":50, "title":689}' and data-coreui-title="Custom Title", then the final value for title will be Custom Title, as the standard data attributes will take precedence over values specified in data-coreui-config. Moreover, existing data attributes can also hold JSON values like data-coreui-delay='{"show":50, "hide":250}'.

Name Type Default Description allowList object DefaultAllowlist Object containing allowed tags and attributes for HTML sanitization when using custom templates. ariaCleanerLabel string Clear all selections A string that provides an accessible label for the cleaner button. This label is read by screen readers to describe the action associated with the button. cleaner boolean true Enables selection cleaner element. clearSearchOnSelect boolean false Clear current search on selecting an item. container string, element, false false Appends the dropdown to a specific element. Example: container: 'body'. disabled boolean false Toggle the disabled state for the component. invalid boolean false Toggle the invalid state for the component. multiple boolean true It specifies that multiple options can be selected at once. name string, null null Set the name attribute for the native select element. options boolean, array false List of option elements. optionsGroupsTemplate function, null null Custom template function for rendering option group labels. Receives the group object as parameter. optionsMaxHeight number, string 'auto' Sets max-height of options list. optionsStyle string 'checkbox' Sets option style. optionsTemplate function, null null Custom template function for rendering individual options. Receives the option object as parameter. placeholder string 'Select...' Specifies a short hint that is visible in the input. required boolean false Makes the input field required for form validation. sanitize boolean true Enables HTML sanitization for custom templates to prevent XSS attacks. sanitizeFn function, null null Custom sanitization function. If provided, it will be used instead of the built-in sanitizer. search boolean, string false Enables search input element. When set to 'global', the user can perform searches across the entire component, regardless of where their focus is within the component. searchNoResultsLabel string 'No results found' Sets the label for no results when filtering. selectAll boolean true Enables select all button. selectAllLabel string 'Select all options' Sets the select all button label. selectionType string 'tag' Sets the selection style. selectionTypeCounterText string 'item(s) selected' Sets the counter selection label. valid boolean false Toggle the valid state for the component. value boolean null Sets the initially selected values for the multi-select component. Methods Method Description show Shows the multi select’s options. hide Hides the multi select’s options. update Updates the configuration of multi select. selectAll Select all options. deselectAll Deselect all options. dispose Destroys an element’s multi select. (Removes stored data on the DOM element) getInstance Static method which allows you to get the multi select instance associated with a DOM element. getValue Returns the array with selected elements. Events

Multi Select component exposes a few events for hooking into multi select functionality.

Method Description changed.coreui.multi-select Fires immediately when an option is selected or deselected. show.coreui.multi-select Fires immediately when the show instance method is called. shown.coreui.multi-select Fired when the multi select options have been made visible to the user and CSS transitions have completed. hide.coreui.multi-select Fires immediately when the hide instance method has been called. hidden.coreui.multi-select Fired when the multi select options have finished being hidden from the user and CSS transitions have completed.

const myMutliSelect = document.getElementById('myMutliSelect')
myMutliSelect.addEventListener('changed.coreui.multi-select', event => {
  // Get the list of selected options.
  const selected = event.value
})

Customizing CSS variables

MultiSelects use local CSS variables on .multi-select for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--cui-form-multi-select-zindex: #{$form-multi-select-zindex};
--cui-form-multi-select-font-family: #{$form-multi-select-font-family};
--cui-form-multi-select-font-size: #{$form-multi-select-font-size};
--cui-form-multi-select-font-weight: #{$form-multi-select-font-weight};
--cui-form-multi-select-line-height: #{$form-multi-select-line-height};
--cui-form-multi-select-color: #{$form-multi-select-color};
--cui-form-multi-select-bg: #{$form-multi-select-bg};
--cui-form-multi-select-box-shadow: #{$form-multi-select-box-shadow};
--cui-form-multi-select-border-width: #{$form-multi-select-border-width};
--cui-form-multi-select-border-color: #{$form-multi-select-border-color};
--cui-form-multi-select-border-radius: #{$form-multi-select-border-radius};
--cui-form-multi-select-disabled-color: #{$form-multi-select-disabled-color};
--cui-form-multi-select-disabled-bg: #{$form-multi-select-disabled-bg};
--cui-form-multi-select-disabled-border-color: #{$form-multi-select-disabled-border-color};
--cui-form-multi-select-focus-color: #{$form-multi-select-focus-color};
--cui-form-multi-select-focus-bg: #{$form-multi-select-focus-bg};
--cui-form-multi-select-focus-border-color: #{$form-multi-select-focus-border-color};
--cui-form-multi-select-focus-box-shadow: #{$form-multi-select-focus-box-shadow};
--cui-form-multi-select-placeholder-color: #{$form-multi-select-placeholder-color};
--cui-form-multi-select-selection-padding-y: #{$form-multi-select-selection-padding-y};
--cui-form-multi-select-selection-padding-x: #{$form-multi-select-selection-padding-x};
--cui-form-multi-select-cleaner-width: #{$form-multi-select-cleaner-width};
--cui-form-multi-select-cleaner-height: #{$form-multi-select-cleaner-height};
--cui-form-multi-select-cleaner-padding-y: #{$form-multi-select-cleaner-padding-y};
--cui-form-multi-select-cleaner-padding-x: #{$form-multi-select-cleaner-padding-x};
--cui-form-multi-select-cleaner-icon: #{escape-svg($form-multi-select-cleaner-icon)};
--cui-form-multi-select-cleaner-icon-color: #{$form-multi-select-cleaner-icon-color};
--cui-form-multi-select-cleaner-icon-hover-color: #{$form-multi-select-cleaner-icon-hover-color};
--cui-form-multi-select-cleaner-icon-size: #{$form-multi-select-cleaner-icon-size};
--cui-form-multi-select-indicator-width: #{$form-multi-select-indicator-width};
--cui-form-multi-select-indicator-height: #{$form-multi-select-indicator-height};
--cui-form-multi-select-indicator-padding-y: #{$form-multi-select-indicator-padding-y};
--cui-form-multi-select-indicator-padding-x: #{$form-multi-select-indicator-padding-x};
--cui-form-multi-select-indicator-icon: #{escape-svg($form-multi-select-indicator-icon)};
--cui-form-multi-select-indicator-icon-color: #{$form-multi-select-indicator-icon-color};
--cui-form-multi-select-indicator-icon-hover-color: #{$form-multi-select-indicator-icon-hover-color};
--cui-form-multi-select-indicator-icon-size: #{$form-multi-select-indicator-icon-size};
--cui-form-multi-select-select-all-padding-y: #{$form-multi-select-select-all-padding-y};
--cui-form-multi-select-select-all-padding-x: #{$form-multi-select-select-all-padding-x};
--cui-form-multi-select-select-all-color: #{$form-multi-select-select-all-color};
--cui-form-multi-select-select-all-bg: #{$form-multi-select-select-all-bg};
--cui-form-multi-select-select-all-border-width: #{$form-multi-select-select-all-border-width};
--cui-form-multi-select-select-all-border-color: #{$form-multi-select-select-all-border-color};
--cui-form-multi-select-select-all-hover-color: #{$form-multi-select-select-all-hover-color};
--cui-form-multi-select-select-all-hover-bg: #{$form-multi-select-select-all-hover-bg};
--cui-form-multi-select-dropdown-min-width: #{$form-multi-select-dropdown-min-width};
--cui-form-multi-select-dropdown-bg: #{$form-multi-select-dropdown-bg};
--cui-form-multi-select-dropdown-border-width: #{$form-multi-select-dropdown-border-width};
--cui-form-multi-select-dropdown-border-color: #{$form-multi-select-dropdown-border-color};
--cui-form-multi-select-dropdown-border-radius: #{$form-multi-select-dropdown-border-radius};
--cui-form-multi-select-dropdown-box-shadow: #{$form-multi-select-dropdown-box-shadow};
--cui-form-multi-select-options-padding-y: #{$form-multi-select-options-padding-y};
--cui-form-multi-select-options-padding-x: #{$form-multi-select-options-padding-x};
--cui-form-multi-select-options-font-size: #{$form-multi-select-options-font-size};
--cui-form-multi-select-options-font-weight: #{$form-multi-select-options-font-weight};
--cui-form-multi-select-options-color: #{$form-multi-select-options-color};
--cui-form-multi-select-optgroup-label-padding-y: #{$form-multi-select-optgroup-label-padding-y};
--cui-form-multi-select-optgroup-label-padding-x: #{$form-multi-select-optgroup-label-padding-x};
--cui-form-multi-select-optgroup-label-font-size: #{$form-multi-select-optgroup-label-font-size};
--cui-form-multi-select-optgroup-label-font-weight: #{$form-multi-select-optgroup-label-font-weight};
--cui-form-multi-select-optgroup-label-color: #{$form-multi-select-optgroup-label-color};
--cui-form-multi-select-optgroup-label-text-transform: #{$form-multi-select-optgroup-label-text-transform};
--cui-form-multi-select-option-padding-y: #{$form-multi-select-option-padding-y};
--cui-form-multi-select-option-padding-x: #{$form-multi-select-option-padding-x};
--cui-form-multi-select-option-margin-y: #{$form-multi-select-option-margin-y};
--cui-form-multi-select-option-margin-x: #{$form-multi-select-option-margin-x};
--cui-form-multi-select-option-border-width: #{$form-multi-select-option-border-width};
--cui-form-multi-select-option-border-color: #{$form-multi-select-option-border-color};
--cui-form-multi-select-option-border-radius: #{$form-multi-select-option-border-radius};
--cui-form-multi-select-option-box-shadow: #{$form-multi-select-option-box-shadow};
--cui-form-multi-select-option-hover-color: #{$form-multi-select-option-hover-color};
--cui-form-multi-select-option-hover-bg: #{$form-multi-select-option-hover-bg};
--cui-form-multi-select-option-focus-box-shadow: #{$form-multi-select-option-focus-box-shadow};
--cui-form-multi-select-option-disabled-color: #{$form-multi-select-option-disabled-color};
--cui-form-multi-select-option-indicator-width: #{$form-multi-select-option-indicator-width};
--cui-form-multi-select-option-indicator-bg: #{$form-multi-select-option-indicator-bg};
--cui-form-multi-select-option-indicator-border: #{$form-multi-select-option-indicator-border};
--cui-form-multi-select-option-indicator-border-radius: #{$form-multi-select-option-indicator-border-radius};
--cui-form-multi-select-option-selected-bg: #{$form-multi-select-option-selected-bg};
--cui-form-multi-select-option-selected-indicator-bg: #{$form-multi-select-option-selected-indicator-bg};
--cui-form-multi-select-option-selected-indicator-bg-image: #{escape-svg($form-multi-select-option-selected-indicator-bg-image)};
--cui-form-multi-select-option-selected-indicator-border-color: #{$form-multi-select-option-selected-indicator-border-color};
--cui-form-multi-select-tag-padding-y: #{$form-multi-select-tag-padding-y};
--cui-form-multi-select-tag-padding-x: #{$form-multi-select-tag-padding-x};
--cui-form-multi-select-tag-bg: #{$form-multi-select-tag-bg};
--cui-form-multi-select-tag-border-width: #{$form-multi-select-tag-border-width};
--cui-form-multi-select-tag-border-color: #{$form-multi-select-tag-border-color};
--cui-form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius};
--cui-form-multi-select-tag-delete-width: #{$form-multi-select-tag-delete-width};
--cui-form-multi-select-tag-delete-height: #{$form-multi-select-tag-delete-height};
--cui-form-multi-select-tag-delete-icon: #{escape-svg($form-multi-select-tag-delete-icon)};
--cui-form-multi-select-tag-delete-icon-color: #{$form-multi-select-tag-delete-icon-color};
--cui-form-multi-select-tag-delete-icon-hover-color: #{$form-multi-select-tag-delete-icon-hover-color};
--cui-form-multi-select-tag-delete-icon-size: #{$form-multi-select-tag-delete-icon-size};
--cui-form-multi-select-selection-tags-gap: #{$form-multi-select-selection-tags-gap};
--cui-form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y};
--cui-form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x};

SASS variables

$form-multi-select-zindex:                    1000;
$form-multi-select-font-family:               $input-font-family;
$form-multi-select-font-size:                 $input-font-size;
$form-multi-select-font-weight:               $input-font-weight;
$form-multi-select-line-height:               $input-line-height;
$form-multi-select-color:                     $input-color;
$form-multi-select-bg:                        $input-bg;
$form-multi-select-box-shadow:                $box-shadow-inset;

$form-multi-select-border-width:              $input-border-width;
$form-multi-select-border-color:              $input-border-color;
$form-multi-select-border-radius:             $input-border-radius;
$form-multi-select-border-radius-sm:          $input-border-radius-sm;
$form-multi-select-border-radius-lg:          $input-border-radius-lg;

$form-multi-select-disabled-color:            $input-disabled-color;
$form-multi-select-disabled-bg:               $input-disabled-bg;
$form-multi-select-disabled-border-color:     $input-disabled-border-color;

$form-multi-select-focus-color:               $input-focus-color;
$form-multi-select-focus-bg:                  $input-focus-bg;
$form-multi-select-focus-border-color:        $input-focus-border-color;
$form-multi-select-focus-box-shadow:          $input-btn-focus-box-shadow;

$form-multi-select-invalid-border-color:      $form-invalid-border-color;
$form-multi-select-valid-border-color:        $form-valid-border-color;

$form-multi-select-placeholder-color:         var(--#{$prefix}secondary-color);

$form-multi-select-selection-padding-y:       $input-padding-y;
$form-multi-select-selection-padding-x:       $input-padding-x;
$form-multi-select-selection-tags-gap:        .25rem;
$form-multi-select-selection-tags-padding-y:  .25rem;
$form-multi-select-selection-tags-padding-x:  .25rem;

$form-multi-select-tag-bg:                    var(--#{$prefix}secondary-bg);
$form-multi-select-tag-border-width:          var(--#{$prefix}border-width);
$form-multi-select-tag-border-color:          var(--#{$prefix}border-color);
$form-multi-select-tag-border-radius:         .25rem;
$form-multi-select-tag-border-radius-sm:      .125rem;
$form-multi-select-tag-border-radius-lg:      .375rem;
$form-multi-select-tag-padding-y:             .0625rem;
$form-multi-select-tag-padding-x:             .5rem;

$form-multi-select-tag-delete-width:             .75rem;
$form-multi-select-tag-delete-height:            .75rem;
$form-multi-select-tag-delete-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><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>");
$form-multi-select-tag-delete-icon-color:        var(--#{$prefix}secondary-color);
$form-multi-select-tag-delete-icon-hover-color:  var(--#{$prefix}body-color);
$form-multi-select-tag-delete-icon-size:         .5rem;

$form-multi-select-cleaner-width:             1.5rem;
$form-multi-select-cleaner-height:            1.5rem;
$form-multi-select-cleaner-padding-x:         0;
$form-multi-select-cleaner-padding-y:         0;
$form-multi-select-cleaner-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><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>");
$form-multi-select-cleaner-icon-color:        var(--#{$prefix}tertiary-color);
$form-multi-select-cleaner-icon-hover-color:  var(--#{$prefix}body-color);
$form-multi-select-cleaner-icon-size:         .625rem;

$form-multi-select-indicator-width:             1.5rem;
$form-multi-select-indicator-height:            1.5rem;
$form-multi-select-indicator-padding-x:         0;
$form-multi-select-indicator-padding-y:         0;
$form-multi-select-indicator-icon:              url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#000'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>");
$form-multi-select-indicator-icon-color:        var(--#{$prefix}tertiary-color);
$form-multi-select-indicator-icon-hover-color:  var(--#{$prefix}body-color);
$form-multi-select-indicator-icon-size:         .75rem;

$form-multi-select-dropdown-min-width:        100%;
$form-multi-select-dropdown-bg:               var(--#{$prefix}body-bg);
$form-multi-select-dropdown-border-color:     var(--#{$prefix}border-color);
$form-multi-select-dropdown-border-width:     var(--#{$prefix}border-width);
$form-multi-select-dropdown-border-radius:    var(--#{$prefix}border-radius);
$form-multi-select-dropdown-box-shadow:       var(--#{$prefix}box-shadow);

$form-multi-select-select-all-padding-y:      .5rem;
$form-multi-select-select-all-padding-x:      .75rem;
$form-multi-select-select-all-color:          var(--#{$prefix}body-secondary-color);
$form-multi-select-select-all-bg:             transparent;
$form-multi-select-select-all-hover-color:    var(--#{$prefix}body-color);
$form-multi-select-select-all-hover-bg:       transparent;
$form-multi-select-select-all-border-width:   $input-border-width;
$form-multi-select-select-all-border-color:   $input-border-color;

$form-multi-select-options-padding-y:         .5rem;
$form-multi-select-options-padding-x:         .75rem;
$form-multi-select-options-font-size:         $font-size-base;
$form-multi-select-options-font-weight:       $font-weight-normal;
$form-multi-select-options-color:             var(--#{$prefix}body-color);

$form-multi-select-optgroup-label-padding-y:       .5rem;
$form-multi-select-optgroup-label-padding-x:       .625rem;
$form-multi-select-optgroup-label-font-size:       80%;
$form-multi-select-optgroup-label-font-weight:     $font-weight-bold;
$form-multi-select-optgroup-label-color:           var(--#{$prefix}tertiary-color);
$form-multi-select-optgroup-label-text-transform:  uppercase;

$form-multi-select-option-padding-y:               .5rem;
$form-multi-select-option-padding-x:               1.25rem;
$form-multi-select-option-margin-y:                1px;
$form-multi-select-option-margin-x:                0;
$form-multi-select-option-border-width:            $input-border-width;
$form-multi-select-option-border-color:            transparent;
$form-multi-select-option-border-radius:           var(--#{$prefix}border-radius);
$form-multi-select-option-box-shadow:              $box-shadow-inset;

$form-multi-select-option-hover-color:             var(--#{$prefix}body-color);
$form-multi-select-option-hover-bg:                var(--#{$prefix}tertiary-bg);

$form-multi-select-option-focus-box-shadow:        $input-btn-focus-box-shadow;

$form-multi-select-option-indicator-width:          1em;
$form-multi-select-option-indicator-bg:             $form-check-input-bg;
$form-multi-select-option-indicator-border:         $form-check-input-border;
$form-multi-select-option-indicator-border-radius:  .25em;

$form-multi-select-option-selected-bg:                      var(--#{$prefix}secondary-bg);
$form-multi-select-option-selected-indicator-bg:            $form-check-input-checked-bg-color;
$form-multi-select-option-selected-indicator-bg-image:      $form-check-input-checked-bg-image;
$form-multi-select-option-selected-indicator-border-color:  $form-multi-select-option-selected-indicator-bg;

$form-multi-select-option-disabled-color:        var(--#{$prefix}secondary-color);

$form-multi-select-font-size-lg:                 $input-font-size-lg;
$form-multi-select-selection-padding-y-lg:       $input-padding-y-lg;
$form-multi-select-selection-padding-x-lg:       $input-padding-x-lg;
$form-multi-select-selection-tags-gap-lg:        .25rem;
$form-multi-select-selection-tags-padding-y-lg:  .25rem;
$form-multi-select-selection-tags-padding-x-lg:  .25rem;
$form-multi-select-tag-padding-y-lg:             .175rem;
$form-multi-select-tag-padding-x-lg:             .5rem;

$form-multi-select-font-size-sm:                 $input-font-size-sm;
$form-multi-select-selection-padding-y-sm:       $input-padding-y-sm;
$form-multi-select-selection-padding-x-sm:       $input-padding-x-sm;
$form-multi-select-selection-tags-gap-sm:        .125rem;
$form-multi-select-selection-tags-padding-y-sm:  .0625rem;
$form-multi-select-selection-tags-padding-x-sm:  .125rem;
$form-multi-select-tag-padding-y-sm:             .075rem;
$form-multi-select-tag-padding-x-sm:             .5rem;

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4