Simple Flat Select Element Replacement With jQuery - Custom Select

Just another custom select box plugin which replaces the native select element with a flat, animated dropdown list with custom styles.

Features:

• Searchable dropdown select.
• Custom CSS styles.
• Keyboard control.
• Callback function.
• jQuery based slideUp/Down animations.

How to use it:

1. Include the style sheet jquery.custom-select.min.css in the document's head section.

<link href="jquery.custom-select.min.css" rel="stylesheet">

2. Include jQuery library and the JavaScript file jquery.custom-select.js at the bottom of the html document.

<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="jquery.custom-select.js"></script>

3. Call the function on the regular select element and done.

$('.custom-select').customSelect();

4. Possible plugin options with default values.

$('.custom-select').customSelect({

  // Adds input to filter options
  search: false,

  // Class name (BEM block name)
  block: 'custom-select',

  // Fires after dropdown closes
  hideCallback: false,

  // Shows chosen value option in dropdown, if enabled also cancels dropdown options refresh
  includeValue: false,

  // True to enable keyboard control
  keyboard: false,

  // Additional class, e.g. BEM modifier
  modifier: false,

  // Input placeholder
  placeholder: false,

  // Fires after dropdown opens
  showCallback: false,

  // jQuery slideUp/Down speed
  transition: 100
  
});

5. Adjust or override the default CSS (SCSS) to create your own styles.

//
// Custom Select jQuery Plugin Base SCSS
//

$custom-select-class: "custom-select";
$white: #fff !default;

@mixin custom-select($block) {
  .#{$block} {
    position: relative;
    background-color: $white;

    &__option {
      overflow: hidden;
      box-sizing: border-box;
      display: block;
      width: 100%;
      padding: 0 5px;
      background-color: transparent;
      border: 0;
      border-radius: 0;
      white-space: nowrap;
      text-align: left;
      text-overflow: ellipsis;
      cursor: pointer;
      user-select: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }

    &__dropdown {
      position: absolute;
      box-sizing: border-box;
      width: 100%;
      top: 100%;
      left: 0;
      background-color: $white;
    }
    
    &__input {
      box-sizing: border-box;
      display: block;
      width: 100%;
      padding: 0 5px;
      border-width: 1px 0;
      border-style: solid;
      border-radius: 0;
    }
  }
}

@include custom-select($custom-select-class);

Changelog:

v1.6.4 (2019-08-08)

• Update disabled state on select

v1.6.3 (2019-05-25)

• Change event.keyCode to event.which

v1.6.1 (2018-12-04)

• Update disabled value after reset

v1.6.0 (2018-09-15)

• Fix outside click

v1.5.9 (2018-08-16)

• Update

v1.5.7 (2018-08-01)

• Fix placeholder reset

v1.5.6 (2018-07-31)

• Fix placeholder if value of select was cleared

v1.5.4 (2018-07-10)

• Add styles to disabled options

v1.5.3 (2018-06-25)

• Fix adding of selected modifier
• Fix for IE11

v1.5.2 (2018-06-13)

• Fix init with reset of not inited

v1.5.0 (2018-06-12)

• Add reset method

v1.4.2 (2018-05-13)

• Fix copying to value original option class

v1.4.0 (2018-04-11)

• Remove input box-shadow
• Do not scroll wrap on keyboard if no input value
• Add appearance none to input
• Refine options background colors

v1.3.4 (2018-03-09)

• Update search input font size

v1.3.3 (2017-11-20)

• Remove duplicated modifiers declaration

v1.3.2 (2017-11-19)

• Add `type="button"` to options

v1.3.0 (2017-11-17)

• Fix wrap scroll when searching
• Fix removed from DOM `_$options` last item

v1.3.0 (2017-11-15)

• Fix moving CSS class for selected option
• Update dependencies & run npm scripts

v1.2.4 (2017-11-10)

• Change dropdown position if no space below
• Add dropdown position update on scroll

v1.2.2 (2017-11-08)

• Bugfix

v1.2.1 (2017-11-08)

• Add placeholder option

v1.0.4 (2017-11-01)

• Bugfix

v1.0.3 (2017-10-30)

• Change keyboard option default value to true

v1.0.2 (2017-10-28)

• Reset input border radius

---

This awesome jQuery plugin is developed by kvlsrg. For more Advanced Usages, please check the demo page or visit the official website.