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

Sizing Systems:

  • input-size attribute - Controls input field size (xs, sm, md, lg, xl)
  • --ms-rem CSS variable - Scales the entire component proportionally
  • Individual CSS variables - Fine-grained control over spacing, fonts, colors, etc.
v1.8.0 Breaking Change: CSS variable naming consolidation:
  • All --ms-*-background* variables renamed to --ms-*-bg*
  • All --base-*-background* variables renamed to --base-*-bg*
  • --ms-text-on-accent renamed to --ms-text-color-on-accent

CS01 Input Size

Control input field size with the input-size attribute

Live Demo
Very compact input
Compact input
Normal input (default)
Spacious input
Touch-friendly input
Code Examples
HTML 
 
 
Details
 
input-size Attribute
 
The input-size attribute controls the input field dimensions independently from dropdown sizing.
 
Available Sizes
 
  • xs - Very compact
    •  
  • sm - Compact
    •  
  • md - Default
    •  
  • lg - Spacious
    •  
  • xl - Touch-friendly
 
Use Cases
 
  • Coordinated sizing - Combine with --ms-rem for consistent UI
    •  
  • Mixed sizing - Large touch-friendly input with compact dropdown
 
CS02 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
 
CS03 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
 
CS04 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
 
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
 
CS05 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
input-size attributeInput field size (xs, sm, md, lg, xl)
--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