Interactive Demo Gallery

Standard dropdown block styled with classic layout guidelines.

StylishSelect.create('.select', {
  style: 'classic',
  theme: 'light',
  animation: 'zoom'
});

Glassmorphism dropdown block with translucent elements.

StylishSelect.create('.select', {
  style: 'glass',
  theme: 'dark',
  animation: 'fade'
});

Glassmorphism dropdown block with subtle light backgrounds.

StylishSelect.create('.select', {
  style: 'glass',
  theme: 'light',
  animation: 'fade'
});

Subtle native-like OS element inspired by macOS layouts.

StylishSelect.create('.select', {
  style: 'macos',
  theme: 'light',
  animation: 'bounce'
});

Console-inspired monospaced green element block.

StylishSelect.create('.select', {
  style: 'terminal',
  theme: 'dark',
  animation: 'none'
});

Fluent-design select box with dynamic theme mapping.

StylishSelect.create('.select', {
  style: 'windows11',
  theme: 'auto',
  animation: 'float'
});

Beautiful Material Design 3 layout with rounded edges.

StylishSelect.create('.select', {
  style: 'md3',
  theme: 'light',
  animation: 'pop'
});

Programmatic theme overrides targeting specific properties.

StylishSelect.create('.select', {
  style: 'modern',
  theme: 'light',
  animation: 'elastic',
  customStyles: {
    bg: '#312e81',
    color: '#ffffff',
    accent: '#f59e0b',
    hoverBg: '#4338ca'
  }
});

Borderless bottom-lined modern interaction selection.

StylishSelect.create('.select', {
  style: 'minimal',
  theme: 'auto',
  animation: 'shrink'
});

Classic 3D inset/outset retrowave style block.

StylishSelect.create('.select', {
  style: 'retro',
  theme: 'light',
  animation: 'none'
});