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