Skip to content

Instantly share code, notes, and snippets.

@kottenator
Created April 23, 2014 10:49
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save kottenator/11210551 to your computer and use it in GitHub Desktop.
Save kottenator/11210551 to your computer and use it in GitHub Desktop.
Select2 styles for Flat UI
/*
* Select2 v3.4.6 styles customization for Flat UI
*/
/*----------------------------------------------- Main select element ------------------------------------------------*/
.select2-container .select2-choice {
height: 41px; /* Jobsy form controls have 37px total height */
border: 2px solid #bdc3c7;
border-radius: 6px;
outline: none;
font: 15px/38px "Lato", Liberation Sans, Arial, sans-serif;
color: #34495e;
/* important - to keep height always as constant */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* reset gradient */
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-transition: border-color .25s;
-moz-transition: border-color .25s;
-ms-transition: border-color .25s;
-o-transition: border-color .25s;
transition: border-color .25s;
}
/* active state */
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
border-color: #1abc9c;
/* reset shadow */
-webkit-box-shadow: none;
box-shadow: none;
}
/* container state, when dropdown open */
.select2-dropdown-open .select2-choice {
border-bottom: none;
border-radius: 6px 6px 0 0;
padding-bottom: 2px;
background-color: #fff;
/* reset shadow */
-webkit-box-shadow: none;
box-shadow: none;
/* reset gradient */
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
/* container state, when dropup open */
.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
border: 2px solid #1abc9c;
border-radius: 0 0 6px 6px;
padding-bottom: 0;
border-top: none;
padding-top: 2px;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
/* disabled state */
.select2-container.select2-container-disabled .select2-choice {
background-color: #f4f6f6;
border: 2px solid #d5dbdb;
color: #d5dbdb;
cursor: default;
}
/*-------------------------------------- X-icon (which clears selected result) ---------------------------------------*/
.select2-container .select2-choice abbr {
top: 12px;
}
.select2-container-active.select2-drop-above .select2-choice abbr {
top: 14px;
}
/*---------------------------------------------------- Down-arrow ----------------------------------------------------*/
.select2-container .select2-choice .select2-arrow {
width: 22px;
height: 27px;
top: 5px;
border: none;
background: #fff;
/* reset gradient */
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.select2-dropdown-open.select2-drop-above .select2-choice .select2-arrow {
top: 7px;
}
/*----------------------------------------------------- Dropdown -----------------------------------------------------*/
/* dropdown with options */
.select2-drop {
-webkit-transition: border-color .25s;
-moz-transition: border-color .25s;
-ms-transition: border-color .25s;
-o-transition: border-color .25s;
transition: border-color .25s;
/* reset shadow */
-webkit-box-shadow: none;
box-shadow: none;
}
/* dropup (case, when there is not enough space below the field) */
.select2-drop.select2-drop-above {
/* reset shadow */
-webkit-box-shadow: none;
box-shadow: none;
}
/* active dropdown */
.select2-drop-active {
border: 2px solid #1abc9c;
border-top: none;
border-radius: 0 0 6px 6px;
}
/* active dropup */
.select2-drop.select2-drop-above.select2-drop-active {
border-top: 2px solid #1abc9c;
border-radius: 6px 6px 0 0;
}
.select2-results .select2-result {
font: 15px/38px "Lato", Liberation Sans, Arial, sans-serif;
color: #34495e;
}
.select2-results .select2-highlighted {
background-color: #1abc9c;
color: #fff;
}
/* help-text line */
.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
background: #fff;
font: 15px/38px "Lato", Liberation Sans, Arial, sans-serif;
color: #34495e;
}
/* "loading more results" message */
.select2-more-results.select2-active {
background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
padding: 4px 7px;
}
/* input in dropdown */
.select2-search input {
background: transparent;
font: 15px/38px "Lato", Liberation Sans, Arial, sans-serif;
color: #34495e;
}
/*----------------------------------------------- Retina displays fix ------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
.select2-container .select2-choice abbr {
margin-top: 1px;
}
.select2-container .select2-choice .select2-arrow {
margin-top: 1px;
}
}
@hoffmanilya
Copy link

Thanks for sharing!

@techhysahil
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment