Dropdown List Custom Theming

The following SASS variables will describe their each responsibility and by overriding those variables, can be generate a new dropdown with different experience to match your preferences.

VariableDefault ValueDescription
$dropdown-icon-color#333Icon color used in Dropdown arrow
$dropdown-search-icon-color#fffIcon color of search field
$dropdown-loading-animation-color#333Icon color of dropdown loading spinner animation
$delete-color#d32f2fIcon color of remove search criteria in Dropdown search field
$dropdown-selector-background#fffDropdown selector box background color
$dropdown-selector-border#dddDropdown selector box border color
$dropdown-selector-border-radius-value0Specify the radius of the outer-edge of dropdown selector box
$dropdown-selector-text-color#333Dropdown selector text color
$dropdown-selector-selected-background#f1f5f5Background color of the selected value of dropdown color
$dropdown-selector-selected-color#333Box shadow value of the data table column selector menu
$dropdown-selector-search-icon-background#3b78e7Background color of the search icon container
$dropdown-selector-search-icon-border-radius0Specify the radius of the outer-edge of the search icon container
$dropdown-selector-search-input-background#fffBackground color of the search input field
$dropdown-selector-search-input-border#dddBorder color of the search input field
$dropdown-selector-search-input-border-radius0Specify the radius of the outer-edge of the search input field
$dropdown-selector-search-input-text-color#333Text color of the search input field
$dropdown-option-wrapper-border-radius-value0Specify the radius of the outer-edge of dropdown option wrapper
$dropdown-option-wrapper-box-shadow2px 2px 10px rgba(0, 0, 0, .2)Specify the shadow amount and color of the dropdown option wrapper
$dropdown-option-wrapper-background#fffBackground color of the dropdown option wrapper
$dropdown-option-wrapper-border#dddBorder color of the dropdown option wrapper
$dropdown-option-wrapper-text-color#333text color of the dropdown option wrapper
$dropdown-option-wrapper-divider-border#dddborder color of the divider between the search input field and option container
$dropdown-no-data-message-text-color#3b78e7Text color of the no results available message
$dropdown-option-container-border-radius-value0Specify the radius of the outer-edge of dropdown option container
$dropdown-option-container-wrapper-border#dddBorder color of the dropdown option container
$dropdown-option-container-option-background#fffBackground color of the searched options in the option container
$dropdown-option-container-option-text-color#333Text color of the searched options in the option container
$dropdown-option-container-option-bordertransparentBorder color of the searched options in the option container
$dropdown-option-container-option-hover-background#dddMouse over background color of the searched options in the option container
$dropdown-option-container-option-hover-text-color#333Mouse over text color of the searched options in the option container
$dropdown-option-container-selected-option-background#3b78e7Background color of the selected searched options in the option container
$dropdown-option-container-selected-option-text-color#fffText color of the selected searched options in the option container
$dropdown-option-container-selected-option-hover-text-color#fffMouse over text color of the selected searched options in the option container
$dropdown-option-container-selected-option-hover-background#333Mouse over background color of the selected searched options in the option container
$dropdown-option-container-group-heading-background#fffBackground color of the group heading in the option container
$dropdown-option-container-group-heading-border#dddBackground color of the group heading in the option container
$dropdown-option-container-group-heading-color#333Text color of the group heading in the option container
$dropdown-option-container-group-heading-hover-background#dddMouse over background color of the group heading in the option container
$dropdown-option-container-group-heading-hover-border#dddMouse over border color of the group heading in the option container
$dropdown-option-container-group-heading-hover-color#333Mouse over text color of the group heading in the option container
Themes
API Doc for Dropdown Custom Theming
  • Content