➤ Install

yarn add select-options

➤ Import

import SelectOptions from 'select-options';

CSS

@import "select-options/dist";

if your bundler supports SCSS

@import "select-options/src";

➤ Usage

document.addEventListener('DOMContentLoaded', () => {
  const selectOptions = new SelectOptions();

  selectOptions.init();
});

➤ API

| Name | Type | Description | |:---------------:|:----------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | updateSelects | function | Updates the state of all custom selects within the select-option-container. This method is useful in situations where the original <select> elements have been programmatically changed and the custom select UI needs to be updated to reflect these changes. |

➤ Options

| Option | Type | Default | Description | |:------------:|:---------:|:-------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | mobileMode | boolean | false | When set to true, the mobileMode parameter allows the default behavior of the native select element to be used on mobile devices instead of the custom dropdown functionality. This takes advantage of the native mobile dropdown interfaces, which are typically more user-friendly on touch screens. |

➤ CSS custom properties

| Variable | Default | Description | |:-----------------------------------|:-------------:|:-------------------------------------------------------------------| | --so-color-outline-inactive | DarkGray | Color of the select border when inactive | | --so-color-outline-hover | SlateGrey | Color of the select border on hover | | --so-color-outline-opened | DodgerBlue | Color of the select border when opened | | --so-color-label-inactive | Gray | Color of the label text when the select is inactive | | --so-color-label-opened | DodgerBlue | Color of the label text when the select is opened | | --so-color-label-selected | DarkGray | Color of the label text when an option is selected | | --so-color-trigger | Gray | Color of the text in the select field (when an option is selected) | | --so-color-list-item-inactive | Gray | Color of the text for inactive list items | | --so-color-list-item-selected | White | Color of the text for selected list items | | --so-color-scrollbar-thumb | Silver | Color of the scrollbar thumb in normal state | | --so-color-scrollbar-track | White | Color of the scrollbar track | | --so-color-scrollbar-hover | Gray | Color of the scrollbar thumb on hover | | --so-background-list | White | Background color of the options list | | --so-background-option-inactive | White | Background color of inactive options | | --so-background-option-hovered | WhiteSmoke | Background color of options on hover | | --so-background-option-selected | DodgerBlue | Background color of selected options | | --so-border-radius-select | 5.5px | Border radius for the select | | --so-border-radius-list | 5.5px | Border radius for the options list | | --so-list-shadow | Material | Shadow for the dropdown menu | | --select-dropdown-arrow | url( ... ) | Sets the image for the select dropdown arrow |

➤ License

select-options is released under MIT license