SimpleSelect

Tiny javascript library which helps you apply custom style on select and multiselect elements. Easy to configure and use!

Example

Single Select

Multi Select

Usage

Via NPM

npm install @schumskie/simpleselect

Via CDN

<script src="https://unpkg.com/@schumskie/simpleselect"></script>

Code:

// If you are using ES6
import SimpleSelect from '@schumskie/simpleselect'

// This will apply simple select to all select elements
SimpleSelect.init('select');

// This will apply simple select to select element with id="select"
SimpleSelect.init('#select');

Styling

Define new theme in your css file using CSS varibles

.simple-select.green {
    --option-hover-color: green;
    --border-radius: 0px;
}

Apply new theme to specific element

SimpleSelect.init('#green-select', {theme: 'green'});

Result