Skip to main content

CSS variables

This page lists the Select specific CSS variables that can be overridden to customize colors and visual states. For general theming concepts and shared theme variables, see the CSS variables overview.

info

Variable names and available options may differ between themes, so make sure to override the variables that correspond to the active theme.

Select variables​

Variables can be overridden globally on :root or scoped to a specific container.

:root {
  --mbsc-select-bg-color: #ffffff;
  --mbsc-select-text-color: #1a1a1a;
  --mbsc-select-selected-color: #0078d4;
}

.my-select {
  --mbsc-select-selected-color: #e91e63;
}
info

Theming & dark mode

Variables can be overridden globally on :root, which affects all active themes.

To target a specific theme, use its theme selector:

  • .mbsc-windows
  • .mbsc-windows-dark
  • .mbsc-ios
  • .mbsc-ios-dark
  • .mbsc-material
  • .mbsc-material-dark

iOS theme​

These variables apply when the ios theme is active.

  • --mbsc-select-accent: Primary accent color for selected items
  • --mbsc-select-bg-color: Select surface / popup background
  • --mbsc-select-text-color: Default select text color
  • --mbsc-select-text-soft: Secondary / muted select text color
  • --mbsc-select-border-color: Select border / separator color
  • --mbsc-select-highlight: Highlighted item background
  • --mbsc-select-filter-bg-color: Filter input background (if filtering enabled)
  • --mbsc-select-focus: Focus outline color

Windows theme​

These variables apply when the windows theme is active.

  • --mbsc-select-accent: Primary accent color for selected items
  • --mbsc-select-bg-color: Select background (surface color)
  • --mbsc-select-text-color: Default select text color
  • --mbsc-select-border-color: Select border / separator color
  • --mbsc-select-highlight: Highlighted item background
  • --mbsc-select-focus: Focus outline color

Material theme​

These variables apply when the material theme is active.

  • --mbsc-select-accent: Primary accent color for selected items
  • --mbsc-select-bg-color: Select surface / dropdown background
  • --mbsc-select-text-color: Default select text color
  • --mbsc-select-highlight: Highlighted item background (e.g. selected state)
  • --mbsc-select-focus: Focus outline color