Select2-Skins
A css skins for Select2 with sizes and colors. Select2-Skins also creates Select2 custom skins more easier using LESS.
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