Theming capabilities
The look and feel of the select can be deeply customized. There are four levels of customization:
- Base themes: Choose between iOS, Material and Windows.
- Light or dark: Every theme has a
lightanddarkvariant. Setting thethemeVariantto'auto'will switch based on system settings. - Custom themes: Use the theme builder to customize the colors and make it match your brand.
- Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme from the header.
Demo
Pick a base theme
Then choose between light or dark theme variant
Turn dark theme on
Or build a custom theme based on any base theme
Use the theme builder or Sass to customize themes
theme: 'ios ',
themeVariant: 'light ' JSHTML
mobiscroll.select('#demo', {
locale: ,
display: 'inline',
theme: 'material', // Can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform
themeVariant: 'dark', // Can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme
});
<select id="demo">
<option value="atl">Atlanta</option>
<option value="ber">Berlin</option>
<option value="bos">Boston</option>
<option value="chi">Chicago</option>
<option value="lon">London</option>
<option value="la">Los Angeles</option>
<option value="ny">New York</option>
<option value="par">Paris</option>
<option value="sf">San Francisco</option>
</select>