rawselect

An accessible jQuery custom select, styled with sass for easy customization https://github.com/rawnet/rawselect

Installation

NPM / Yarn

npm install rawselect --save
yarn add rawselect

Usage

HTML

<select class="rawselect">
  <option value="">Please select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Imports

@import '../../node_modules/rawselect/dist/rawselect.sass'
import rawselect from 'rawselect'

JS

$('.rawselect').rawselect();

Search

You can enable search by passing the option when you initialize the plugin.

$('.rawselect').rawselect({
  search: true
});

Alternativley you can enable/disable search on inidividual instances using a data attribute:

<select class="rawselect" data-rawselect-search="true">
  <option value="">Please select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Themes

There are three default themes, light, dark and block. The light theme is applied by default, to apply the dark theme simply add the rawselect--dark class to your select, and to apply the block theme simply add rawselect--block.

<select class="rawselect rawselect--dark">
  <option value="">Please select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<select class="rawselect rawselect--block">
  <option value="">Please select something</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Icons

You can add an icon to your options by simply adding a data-icon attribute to the option.

<select class="rawselect rawselect--dark">
  <option value="">Please select something</option>
  <option value="1" data-icon="http://placehold.it/30x20">Option 1</option>
  <option value="2" data-icon="http://placehold.it/30x20">Option 2</option>
</select>

Classes

Any classes you add to your select or option will get copied across to rawselect, this is useful for custom themes or for adding icons to options.

<select class="rawselect my-class">
  <option value="">Please select something</option>
  <option value="1" class="my-class">Option 1</option>
  <option value="2" class="my-class">Option 2</option>
</select>

Customization

rawselect has been written to be easily customized using Sass variables. To overwrite the defaults simply define your variables before the inclusion of rawselect.sass.

Available variables

$rawselect-border-radius:           4px !default
$rawselect-border-width:            1px !default
$rawselect-color-background-dark:   #363636 !default
$rawselect-color-background-light:  #ffffff !default
$rawselect-color-brand:             #f70c36 !default
 
$rawselect-color-font-dark:         #666666 !default
$rawselect-color-font-light:        #999999 !default
$rawselect-font-family:             sans-serif !default
$rawselect-font-size:               13px !default
$rawselect-line-height:             1.2 !default
$rawselect-text-align:              left !default
 
$rawselect-max-width:               400px !default
$rawselect-min-width:               200px !default
$rawselect-height:                  50px !default
$rawselect-options-max-height:      200px !default
 
$rawselect-padding:                 17px 50px 18px 18px !default
$rawselect-option-padding:          13px 18px 14px !default
$rawselect-optgroup-padding:        13px 18px 14px 28px !default
 
$rawselect-arrow-border-width:      2px !default
$rawselect-arrow-border-radius:     0px !default
$rawselect-arrow-size:              10px !default
$rawselect-block-width:             50px !default
 
$rawselect-max-icon-size:           50px !default
$rawselect-icon-margin:             0 10px 0px 0 !default

Events

rawselect triggers a change event on the select;

Methods

rawselect provides an rawselect.update method which when triggered on the select will re-populate the options. It also provides a rawselect.change method which when triggered on the select will update the sellectron trigger to match the value of the select

License

Copyright (c) 2018 Rawnet

Licensed under the MIT license.