Restyle and Enhance Native Select Boxes with Select.js

Category: Form , Javascript | February 25, 2024
Author:williamtroup
Views Total:33 views
Official Page:Go to website
Last Update:February 25, 2024
License:MIT

Preview:

Restyle and Enhance Native Select Boxes with Select.js

Description:

Select.js is a JavaScript library that upgrades the default <select> box into a fully customizable and styleable dropdown list. Things like colors, borders, buttons and more can be customized with CSS. The selected option(s) will be displayed as tokens/chips inside the dropdown.

Additionally, Select.js has built-in support for the Bootstrap framework, so your dropdowns automatically blend into Bootstrap projects. It also fires useful events like “render” and “change” that you can hook into to trigger custom logic.

How to use it:

1. Download the package and include the following files on the page.

<link rel="stylesheet" href="/dist/select.js.css" />
<script src="/dist/select.js"></script>

2. Pass the following options via the data-select-options attribute:

  • render: Determine whether to render the elelement. Default: true.
  • dropDownShowDelay: The time to wait before displaying the dropdown list. Default: 50.
  • showDropDownButton: Determine whether to show the open/close button. Default: true.
<select multiple="multiple" data-select-options="{'render': true, 'dropDownShowDelay':50, 'showDropDownButton': true}">
  <option value="1" selected="selected">Option 1</option>
  <option value="2">Option 2</option>
  <option value="2">Option 3</option>
  ...
</select>

3. Callback functions:

  • onSelectedItemsChanged(values)
  • onRenderComplete(element)
  • onDropDownShow(element)
  • onDropDownHide(element)
<select multiple="multiple" data-select-options="{'onRenderComplete': myFunction, 'onSelectedItemsChanged': myFunction}">
  <option value="1" selected="selected">Option 1</option>
  <option value="2">Option 2</option>
  <option value="2">Option 3</option>
  ...
</select>

4. Change the style of the custom select by overriding the default CSS varaibles as follows:

:root {
    // Fonts
    --select-js-default-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    // Colors
    --select-js-color-black: #3b3a3a;
    --select-js-color-white: #F5F5F5;
    --select-js-color-gray: #AAAAAA;
    --select-js-color-light-gray: #CCCCCC;
    // Containers
    --select-js-container-background-color: #e8e6e6;
    --select-js-container-border-color: #3b3a3a;
    --select-js-container-background-color-drop-down: #e8e6e6;
    --select-js-container-border-color-drop-down: #3b3a3a;
    // Borders
    --select-js-border-radius: 0.5rem;
    --select-js-border-style-scrollbar: inset 0 0 6px --color-dark-gray;
    --select-js-border-size: 0.5px;
    // Transitions
    --select-js-transition: all .3s;
    // Spacing/Sizing
    --select-js-spacing-shadow-size: 4px;
    --select-js-spacing: 8px;
}

Changelog:

v0.5.0 (02/25/2024)

  • CSS improvements
  • Bugfixes

v0.4.0 (01/17/2024)

  • CSS improvements

v0.3.0 (01/04/2024)

  • Pressing escape in the document will close all opened drop-down menus.
  • Added new callback

v0.2.3 (12/19/2023)

  • Doc updated

You Might Be Interested In:


Leave a Reply