Simple Flat Select Element Replacement With jQuery - Custom Select

Simple Flat Select Element Replacement With jQuery - Custom Select
File Size: 71.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

2018-09-15

  • Fix outside click

v1.5.9 (2018-08-16)

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.