select2-skins

Select2-Skins

A css skins for Select2 with sizes and colors. Select2-Skins also creates Select2 custom skins more easier using LESS.

Download CSS Compiled and minified CSS

Download Source Includes less files, unminified css and docs

or you can install using Bower

$ bower install select2-skins

How to Use

If you are using Select2 as a replacement for select boxes, what you need to do is add the select2 css together with the select2 skins css in the <head> of your page. See code below.

<link rel="stylesheet" href="select2.css">
<link rel="stylesheet" href="select2-skins.css">

Select2-Skins also uses FontAwesome for the arrow icon so you also need to include it in the <head> of your page.

<link rel="stylesheet" href="font-awesome.min.css">

The Basics

When you initialize using basic select2, you do it like in the code below:

$('select').select2();

But when you use the select2 skins you should add class names like in the code below:

$('select').select2({
  containerCssClass: 'tpx-select2-container',
  dropdownCssClass: 'tpx-select2-drop'
});

The tpx-select2-container class overrides the default select2 styles while tpx-select2-drop overrides the styles for the dropdown menu from select2.css file.

Default:

Multiple Select:

Sizes

When you use Select2, you don't have an option to create large size boxes or smaller boxes instead you have to modify their css in order to get that size that you wanted. Now you can make large size select boxes by adding a class name select2-container-lg or select2-container-sm for smaller size when you initialize select2.

Large:

$('select').select2({
  containerCssClass: 'tpx-select2-container select2-container-lg',
  dropdownCssClass: 'tpx-select2-drop'
});

Small:

$('select').select2({
  containerCssClass: 'tpx-select2-container select2-container-sm',
  dropdownCssClass: 'tpx-select2-drop'
});

Validation States

Select2-Skins includes validation styles for error, success and warning states on form. To use refer the codes below.

When error occurs, you should add a class .select2-error to .tpx-select2-container

Success states should add a class .select2-success to .tpx-select2-container

Warning states should add a class .select2-warning to .tpx-select2-container

Skin Variants

Use any of the available select2 skin classes to create a styled select2 boxes.

Code:

$('select').select2({
  containerCssClass: 'tpx-select2-container select2-grey',
  dropdownCssClass: 'tpx-select2-drop'
});

.select2-grey

.select2-darkgrey

.select2-lightblue

.select2-blue

.select2-lime

.select2-pomelo

.select2-orange

.select2-bluegreen

This also applies to multiple select box. See example below using .select2-bluegreen.

You can also add skin to dropdown menu or both container and dropdown like in the examples below:

Example:

Code:

$('select').select2({
  containerCssClass: 'tpx-select2-container',
  dropdownCssClass: 'tpx-select2-drop select2-blue'
});

Example:

Code:

$('select').select2({
  containerCssClass: 'tpx-select2-container select2-darkgrey',
  dropdownCssClass: 'tpx-select2-drop select2-blue'
});

Do you want to add your own colors? You can add your own skin easily using LESS by going to next section below.

Using LESS

select2-skins is built using LESS. You can take advantage of it by adding more colors or adding even larger select boxes very easily.

By using LESS, I recommend you to use Grunt to compile and minified it to css very easily. If you haven't used Grunt before, be sure to check out the Grunt's Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins.

Variables

You can easily change values for your select box skins by changing the variable's default value without the need to track css selectors when changing colors or borders. Please refer to the list of variables below:

@font-size-base:              14px;
@font-family-base:            'Helvetica Neue', Helvetica, sans-serif;
@border-color-base:           fadeout(#000,80%);
@border-color-active-base:    fadeout(#000,70%);
@color-highlight-base:        #428BCA;

@error-color:                 #cc0000;
@success-color:               #3C763D;
@warning-color:               #C0753B;

@font-icon:                   'FontAwesome';
@font-arrow-down:             '\f078';
@font-arrow-up:               '\f077';
@icon-size:                   12px;

@arrow-wrapper-width:         30px;

Mixins

One of the best thing to do is that you can easily add more colors by calling this mixin used for adding skins very easily.

Note: @skin-classname is required when calling this mixin when adding your own skin.

.skin-variant(@skin-classname, @border-color: @border-color-base, @bgcolor: #fff, @color: #333) {

  @border-active: darken(@border-color, 7%);

  .tpx-select2-container {
    &.@{skin-classname} {
      .select2-choice {
        border-color: @border-color;
        background-color: @bgcolor;
        box-shadow: none;
        color: @color;

        .select2-arrow {
          border-left-color: @border-color;
          background-color: @bgcolor;
          color: @color;
        }
      }

      .select2-default .select2-chosen {
        color: fadeout(@color, 50%);
      }

      &.select2-container-multi {
        .select2-choices {
          .select2-search-choice {
            border-color: darken(@border-color, 5%);
            background-color: @bgcolor;
            color: @color;

            &:before {
              color: fadeout(@color, 50%);
            }
          }
        }
      }

      &.select2-container-active {
        .select2-choice {
          border-color: @border-active;

          .select2-arrow {
            border-left-color: @border-active;
          }
        }
      }
    }
  }

  .tpx-select2-drop {
    &.@{skin-classname} {
      border-color: @border-active;
      background-color: @bgcolor;

      .select2-search input {
        border-color: @border-active;
      }

      .select2-results {
        color: @color;
      }

      .select2-highlighted {
        background-color: darken(@bgcolor, 20%);
      }
    }
  }
}

Add Your Own Skins

Now you can easily add your own skins by calling the mixin above in just one line of code like in the example below:

.skin-variant(select2-bluegreen, darken(#00D0CA,5%), #00D0CA, #fff);

Parameters

Parameter	Default Value	Description
@skin-classname	None (required)	Any string for your class names that you'd like to name in your skin.
@border-color	@border-color-base (optional)	Any colors that you would like for the border of your container and dropdown menu
@bgcolor	#FFF (optional)	Any colors that you would like for the background of your container and dropdown menu
@color	#333 (optional)	Any colors that you would like for the text of your container and dropdown menu

For reporting a bug, create an issue to https://github.com/themepixels/select2-skins/issues