The multiselect provides flexible sizing via CSS variables and complete theming control via CSS custom properties.

Sizing & theming approaches:

  • --ms-rem CSS variable - Scales the entire component proportionally (default: 10px)
  • Individual CSS variables - Fine-grained control over spacing, fonts, colors, etc.
  • Component-scoped themes - Apply a class with overrides for a single instance
New in v1.11.0:
  • Automatic OS-aware dark mode. Every --base-* color default now resolves through the CSS light-dark() function. When your page (or any ancestor) declares color-scheme: dark, the multiselect adopts readable dark defaults on its own — no need to enumerate the ~15 variable overrides shown in the custom dark theme below. Explicit --ms-* overrides still win when you want a bespoke palette.
  • Sturdier dropdown positioning. The dropdown no longer drifts sideways when an option is wider than the input, and it stays anchored inside layouts whose ancestors use container-type / contain (common in app shells). A one-time console.warn now names the culprit element if a containing-block property still forces drift, with an actionable fix.
  • --base-* theming taxonomy realigned. If you theme via the shared --base-* hooks, --base-primary-bg → --base-hover-bg and --base-primary-bg-hover → --base-active-bg. The --ms-* variables used throughout this page are unaffected.
New in v1.10.0:
  • See THEMING.md for the complete state-by-state theming reference (every .ms__* class, every --ms-* variable, every interactive state).
  • The remove (X) buttons on badges, the count display, and the selected-items popover now render as SVG via mask-image + currentColor, so their color flows through the existing --ms-badge-remove-color, --ms-count-clear-color, and --ms-selected-popover-close-color variables.
  • Three new icon-size variables let you tune glyph dimensions independently: --ms-badge-remove-icon-size, --ms-count-clear-icon-size, --ms-selected-popover-close-icon-size.

CS01 Component Scaling with --ms-rem

Scale the entire component by setting the --ms-rem CSS variable

Live Demo
Perfect for dense dashboards
Good for compact layouts
Standard size
Spacious desktop layouts
Touch-friendly, accessibility
Code Examples
CSS Classes 
 
 
HTML 
 
 
 
How It Works
 
How --ms-rem Works
 
The --ms-rem CSS variable is the base unit (default: 10px) used throughout the component. All spacing, fonts, and sizes are calculated relative to this value.
 
Scale Values
 
  • 6px - 60% scale (extra small)
    •  
  • 8px - 80% scale (small)
    •  
  • 10px - 100% scale (default)
    •  
  • 12px - 120% scale (large)
    •  
  • 15px - 150% scale (extra large)
 
Important: Shadow DOM
 
CSS variables must be set directly on the <web-multiselect> element (via class or inline style), not on a wrapper div. This is due to Shadow DOM encapsulation.
 
Benefits
 
  • Proportional scaling - Everything scales together
    •  
  • Any value - Not limited to preset sizes
    •  
  • Responsive - Use media queries to scale based on viewport
 
CS02 Fine-Grained Control
 
Override individual CSS variables for precise control
 
Live Demo
 
  Big text with tight padding
 
  Normal layout with larger text
 
  Compact text with generous padding
 
Code Examples
 
HTML 
 
 
 
CSS 
 
 
 
Available Variables
 
Spacing Variables
 
  • --ms-input-padding-v - Vertical padding
    •  
  • --ms-input-padding-h - Horizontal padding
    •  
  • --ms-option-padding-v - Option vertical padding
    •  
  • --ms-option-padding-h - Option horizontal padding
    •  
  • --ms-badge-padding-v - Badge vertical padding
    •  
  • --ms-badge-padding-h - Badge horizontal padding
 
Font Size Variables
 
  • --ms-input-font-size - Input text size
    •  
  • --ms-option-font-size - Option text size
    •  
  • --ms-badge-font-size - Badge text size
    •  
  • --ms-group-label-font-size - Group header size
 
Use Cases
 
  • Accessibility - Larger fonts without changing layout
    •  
  • Dense dashboards - Compact spacing with readable text
    •  
  • Touch interfaces - Large targets with normal fonts
 
CS03 CSS Custom Properties (Theming)
 
Customize colors, borders, and more with CSS variables
 
Live Demo
 
  Out-of-the-box appearance
 
  Bootstrap primary color
 
  Fully customized dark appearance Since v1.11.0, a page-level color-scheme: dark gives you readable dark defaults automatically — reach for a full override like this only when you want a bespoke palette.
 
Code Examples
 
CSS 
 
 
 
HTML 
 
 
 
JavaScript 
 
 
 
How to Use
 
How CSS Variables Work
 
The component defines all variables with :host inside its Shadow DOM. You can override them from outside:
 
  • Global - Target web-multiselect selector
    •  
  • Scoped - Add a class and target web-multiselect.your-class
    •  
  • Instance - Use inline styles
 
Benefits
 
  • Scoped - Theme individual selects differently
    •  
  • Dynamic - Change themes at runtime with JavaScript
    •  
  • Maintainable - No need to modify component source
    •  
  • Performant - Browser-native CSS variable support
 
CS04 CSS Variables Reference
 
125+ CSS custom properties for complete customization
 
Variable Categories
 
Base Color Variables
 
  • --ms-accent-color - Primary accent color
    •  
  • --ms-text-color - Default text color
    •  
  • --ms-text-color-on-accent - Text on accent backgrounds
    •  
  • --ms-border-color - Default border color
    •  
  • --ms-bg - Base background color
 
Component-Specific Variables
 
  • Input: --ms-input-bg, --ms-input-border-color, --ms-input-focus-*, and 10+ more
    •  
  • Dropdown: --ms-dropdown-bg, --ms-dropdown-border-color, --ms-dropdown-shadow
    •  
  • Options: --ms-option-bg-*, --ms-option-title-color-*, and 15+ more
    •  
  • Badges: --ms-badge-bg, --ms-badge-color, --ms-badge-*-hover
    •  
  • Groups: --ms-group-label-*, --ms-group-divider-*
    •  
  • Actions: --ms-action-btn-*, --ms-actions-bg
 
Sizing & Spacing
 
  • --ms-rem - Base unit for scaling (default: 10px)
    •  
  • --ms-input-height, --ms-input-min-height
    •  
  • --ms-border-radius-sm/md/lg - Border radii
    •  
  • --ms-options-max-height - Dropdown max height
 
Example Variables
 
Common Variables 
 
 
 
Full Reference
 
Full Reference
 
See the complete list of 125+ CSS variables in the GitHub README - CSS Custom Properties.
 
Variable Naming Convention
 
  • --ms-* - Component-specific variables
    •  
  • --base-* - Theme integration variables (e.g., theme-designer)
 
Inheritance
 
Component variables inherit from base variables:
 
  • --ms-accent-color falls back to --base-accent-color
    •  
  • --ms-border-color falls back to --base-border-color
    •  
  • etc.
 
Input Field Styling
 
Comprehensive input styling with CSS custom properties for the input field.
 
 
Input Variables
 
  • --ms-input-bg - Input background color
    •  
  • --ms-input-text - Input text color
    •  
  • --ms-input-border-color - Border color
    •  
  • --ms-input-border-color-hover - Border on hover
    •  
  • --ms-input-focus-border-color - Border when focused
    •  
  • --ms-input-placeholder-color - Placeholder text
    •  
  • --ms-input-focus-shadow - Focus ring shadow
 
 
Shadow DOM Note
 
The multiselect uses Shadow DOM for style isolation. CSS variables must be set on the <web-multiselect> element itself, not on wrapper divs.
 
Example
 
CSS Variables 
 
 
 
Quick Reference
 
Sizing Approach
 
MethodUsage
--ms-rem CSS variableScale entire component (default: 10px)
--ms-input-* variablesFine-tune input appearance
--ms-option-* variablesFine-tune dropdown options
 
--ms-rem Scale Values
 
ValueScaleUse Case
6px60%Dense dashboards
8px80%Compact layouts
10px100%Default
12px120%Spacious desktops
15px150%Touch/accessibility