CSelect
Description
Custom select plugin allows you to replace the standard selected on their own, which can be styled as your heart desires. Default stylized standard select. Mechanic behavior as much as possible trying to match the standard selects.
Demo
How to use
Include the plugin styles
Include the custom select plugin
If you using a module bundler
npm i cselect --save
Simple markup
1 2 3
Initialize the plugin
var selectEl = document.querySelector('#sel');new CSelect(selectEl);
Options
Available options and default values
maxWidth : null, // maximum width valuecustomClass : '', // Additional class for more customizationanimation : null, // Toggle animation effectshowMaxOptions: null, // Number of visible itemsonChange : function () { } // Callback return the selected item info
Available animation classes fadeIn | slideInDown | slideInUp | zoomInDown or you can add your own.
onChnage()
This method returns the following information event type
, selected value
, selected text
, selected index
.