Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Select2 CSS for Zurb Foundation 5
/*
Version: 3.4.5 Timestamp: Mon Nov 4 08:22:42 PST 2013
*/
.select2-container {
margin: 0 0 1rem 0;
position: relative;
vertical-align: middle;
font-family: inherit;
-webkit-appearance: none !important;
font-size: 0.875rem;
background: #fafafa url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgMTYgMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+DQo=") no-repeat;
background-position-x: 100%;
background-position-y: center;
}
.select2-container:hover {
background-color: #f2f2f2;
border-color: #999;
}
.error .select2-container {
margin-bottom: 0;
}
.select2-container,
.select2-drop,
.select2-search,
.select2-search input {
/*
Force border-box so that % widths fit the parent
container without overlap because of margin/padding.
More Info : http://www.quirksmode.org/css/box.html
*/
-webkit-box-sizing: border-box; /* webkit */
-moz-box-sizing: border-box; /* firefox */
box-sizing: border-box; /* css3 */
}
.select2-container .select2-choice {
display: block;
overflow: hidden;
position: relative;
height: 2.315rem;
border: 1px solid #ccc;
padding: 0.5rem 1rem 0.5rem 0.5rem;
white-space: nowrap;
line-height: 1.3125rem;
color: inherit;
text-decoration: none;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select2-container.select2-drop-above .select2-choice {
/*border-bottom-color: #aaa;*/
}
.select2-container.select2-allowclear .select2-choice .select2-chosen {
margin-right: 42px;
}
.select2-container .select2-choice > .select2-chosen {
margin-right: 1rem;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.select2-container .select2-choice abbr {
display: none;
width: 9px;
height: 9px;
position: absolute;
right: 24px;
top: 13px;
font-size: 1px;
text-decoration: none;
border: 0;
background: transparent url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjlweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9Ii0xIC0xIDkgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMSAtMSA5IDkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNy41LDAuOTU1IDYuMDQ2LC0wLjUgMy41LDIuMDQ1IDAuOTU1LC0wLjUgLTAuNSwwLjk1NSAyLjA0NSwzLjUgLTAuNSw2LjA0NCAwLjk1NSw3LjUgMy41LDQuOTU0IDYuMDQ2LDcuNSA3LjUsNi4wNDQgNC45NTQsMy41ICIvPjwvc3ZnPg==") 50% 50% no-repeat;
cursor: pointer;
outline: 0;
opacity: 0.5;
}
.select2-container.select2-allowclear .select2-choice abbr {
display: inline-block;
}
.select2-container .select2-choice abbr:hover {
/*background-position: right -11px;*/
opacity: 1;
cursor: pointer;
}
.select2-drop-mask {
border: 0;
margin: 0;
padding: 0;
position: fixed;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
opacity: 0;
z-index: 9998;
/* styles required for IE to work */
background-color: #fff;
filter: alpha(opacity=0);
}
.select2-drop {
width: 100%;
margin-top: -1px;
position: absolute;
z-index: 9999;
top: 100%;
background: #fafafa;
color: #000;
border: 1px solid #999;
border-top: 0;
outline: none;
-webkit-box-shadow: 0 3px 5px -2px #999999;
-moz-box-shadow: 0 3px 5px -2px #999999;
box-shadow: 0 3px 5px -2px #999999;
/*
padding-top: 2.315rem;
margin-top: -2.315rem;
*/
}
.select2-drop-auto-width {
border-top: 1px solid #aaa;
width: auto;
}
.select2-drop-auto-width .select2-search {
padding-top: 4px;
}
.select2-drop.select2-drop-above {
/*margin-top: 1px;*/
/*border-top: 1px solid #aaa;*/
/*border-bottom: 0;*/
padding-top: 0;
margin-top: 0;
margin-bottom: -4.630rem;
padding-bottom: 2.315rem;
}
.select2-drop-active {
border: 1px solid #999;
border-top: none;
}
.select2-drop.select2-drop-above.select2-drop-active {
border-top: 1px solid #999;
}
.select2-container .select2-choice .select2-arrow {
display: none;
/* width: 18px;
height: 100%;
position: absolute;
right: 0;
top: 0;
border-left: 1px solid #aaa;
border-radius: 0 4px 4px 0;
background-clip: padding-box;
background: #ccc;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
background-image: linear-gradient(top, #ccc 0%, #eee 60%);
*/}
.select2-container .select2-choice .select2-arrow b {
display: block;
width: 100%;
height: 100%;
background: url('select2.png') no-repeat 0 1px;
}
.select2-search {
display: inline-block;
width: 100%;
min-height: 26px;
margin: 0;
padding-left: 4px;
padding-right: 4px;
position: relative;
/*z-index: 10000;*/
white-space: nowrap;
}
.select2-search input {
width: 100%;
height: auto !important;
min-height: 26px;
padding: 4px 20px 4px 5px;
margin: 0;
outline: 0;
font-family: sans-serif;
/*font-size: 1em;*/
border: 1px solid #aaa;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
background: #fff url('select2.png') no-repeat 100% -22px;
/* background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #fff 85%, #eee 99%);
*/}
.select2-drop.select2-drop-above .select2-search input {
margin-top: 4px;
}
.select2-search input.select2-active {
background: #fff url('select2-spinner.gif') no-repeat 100%;
/* background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #fff 85%, #eee 99%);
*/}
.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
border: 1px solid #999;
outline: none;
-webkit-box-shadow: 0 0 5px #999;
-moz-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
}
.select2-dropdown-open .select2-choice {
/*border-bottom-color: transparent;*/
border-bottom-width: 0;
background: #fafafa;
/*z-index: 10000;*/
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
/*border: 1px solid #999;*/
border-top-color: #ccc;
border-bottom-width: 1px;
}
.select2-dropdown-open .select2-choice .select2-arrow {
background: transparent;
border-left: none;
filter: none;
}
.select2-dropdown-open .select2-choice .select2-arrow b {
background-position: -18px 1px;
}
/* results */
.select2-results {
max-height: 200px;
padding: 0 0.25rem;
margin: 0.25rem 0;
position: relative;
overflow-x: hidden;
overflow-y: auto;
font-size: 0.875rem;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.select2-results ul.select2-result-sub {
margin: 0;
padding-left: 0;
}
.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
.select2-results li {
list-style: none;
display: list-item;
background-image: none;
}
.select2-results li.select2-result-with-children > .select2-result-label {
font-weight: bold;
}
.select2-results .select2-result-label {
padding: 0.25rem;
margin: 0;
cursor: pointer;
min-height: 1em;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select2-results .select2-highlighted {
background: #3875d7;
color: #fff;
}
.select2-results li em {
background: #feffde;
font-style: normal;
}
.select2-results .select2-highlighted em {
background: transparent;
}
.select2-results .select2-highlighted ul {
background: #fff;
color: #000;
}
.select2-results .select2-no-results,
.select2-results .select2-searching,
.select2-results .select2-selection-limit {
background: transparent;
display: list-item;
padding: 0.25rem;
color: #999;
font-style: italic;
}
/*
disabled look for disabled choices in the results dropdown
*/
.select2-results .select2-disabled.select2-highlighted {
color: #666;
background: #eee;
display: list-item;
cursor: default;
}
.select2-results .select2-disabled {
background: #eee;
display: list-item;
cursor: default;
}
.select2-results .select2-selected {
display: none;
}
.select2-more-results.select2-active {
background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
}
.select2-more-results {
background: #f4f4f4;
display: list-item;
}
/* disabled styles */
.select2-container.select2-container-disabled .select2-choice {
background-color: #eee;
background-image: none;
border: 1px solid #ddd;
cursor: default;
}
.select2-container.select2-container-disabled .select2-choice .select2-arrow {
background-color: #eee;
background-image: none;
border-left: 0;
}
.select2-container.select2-container-disabled .select2-choice abbr {
display: none;
}
/* multiselect */
.select2-container-multi .select2-choices {
height: auto !important;
height: 1%;
margin: 0;
padding: 0;
position: relative;
font-size: 0.875rem;
cursor: text;
overflow: hidden;
background-color: #fafafa;
border: 1px solid #ccc;
}
.select2-locked {
padding: 3px 5px 3px 5px !important;
}
.select2-container-multi.select2-container-active .select2-choices {
border: 1px solid #999;
outline: none;
-webkit-box-shadow: 0 0 5px #999;
-moz-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
}
.select2-container-multi.select2-container-active.select2-dropdown-open .select2-choices {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.select2-container-multi .select2-choices li {
float: left;
list-style: none;
}
.select2-container-multi .select2-choices .select2-search-field {
margin: 0;
padding: 0;
white-space: nowrap;
}
.select2-container-multi .select2-choices .select2-search-field input {
padding: 5px;
margin: 1px 0;
font-family: sans-serif;
font-size: 100%;
color: #666;
outline: 0;
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: transparent !important;
}
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
background: #fff url('select2-spinner.gif') no-repeat 100% !important;
}
.select2-default {
color: #999 !important;
}
.select2-container-multi .select2-choices .select2-search-choice {
padding: .1875rem .5rem .1875rem 1.25rem;
margin: .25rem 0 0 .25rem;
position: relative;
line-height: 1.5rem;
color: #333;
cursor: default;
background-color: #ddd;
background-clip: padding-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
cursor: default;
}
.select2-container-multi .select2-choices .select2-search-choice-focus {
background: #d4d4d4;
}
.select2-search-choice-close {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
position: absolute;
right: .25rem;
top: .5rem;
font-size: 1px;
outline: none;
background: transparent url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjlweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9Ii0xIC0xIDkgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMSAtMSA5IDkiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNy41LDAuOTU1IDYuMDQ2LC0wLjUgMy41LDIuMDQ1IDAuOTU1LC0wLjUgLTAuNSwwLjk1NSAyLjA0NSwzLjUgLTAuNSw2LjA0NCAwLjk1NSw3LjUgMy41LDQuOTU0IDYuMDQ2LDcuNSA3LjUsNi4wNDQgNC45NTQsMy41ICIvPjwvc3ZnPg==") 50% 50% no-repeat;
opacity: 0.5;
}
.select2-container-multi .select2-search-choice-close {
left: .25rem;
}
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
opacity: 1;
}
.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
/*background-position: right -11px;*/
}
/* disabled styles */
.select2-container-multi.select2-container-disabled .select2-choices {
background-color: #eee;
background-image: none;
border: 1px solid #ddd;
cursor: default;
}
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
padding: 3px 5px 3px 5px;
border: 1px solid #ddd;
background-image: none;
background-color: #eee;
}
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
display: none;
background: none;
}
/* end multiselect */
.select2-result-selectable .select2-match,
.select2-result-unselectable .select2-match {
text-decoration: underline;
}
.select2-offscreen, .select2-offscreen:focus {
clip: rect(0 0 0 0) !important;
width: 1px !important;
height: 1px !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: absolute !important;
outline: 0 !important;
left: 0px !important;
top: 0px !important;
}
.select2-display-none {
display: none;
}
.select2-measure-scrollbar {
position: absolute;
top: -10000px;
left: -10000px;
width: 100px;
height: 100px;
overflow: scroll;
}
/* Retina-ize icons */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
.select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice .select2-arrow b {
background-image: url('select2x2.png') !important;
background-repeat: no-repeat !important;
background-size: 60px 40px !important;
}
.select2-search input {
background-position: 100% -21px !important;
}
}
@orthodoc

This comment has been minimized.

Copy link

@orthodoc orthodoc commented Feb 15, 2014

Love the fact that you worked to get select2 integrated with foundation. Without this gist of yours I would have been struggling to do this for my own project.

Its a rails app. I had to create getter and setter methods to get select2 to behave well with rails. Setting new and creating an object works well for the moment. But while editing, the selected values are not displayed at all. .select2-selectable is set to display none, as it must exclude the drop down list from displaying already selected values. But how do I get the text-box to display and therefore edit the already selected values?? I am posing the question here as I can see that the values are present while inspecting with chrome-dev tools, so I presume its a question of displaying the associated text.

@orthodoc

This comment has been minimized.

Copy link

@orthodoc orthodoc commented Feb 16, 2014

I figured that the problem was with initSelection function. I managed it to display a drop down but editing is still a far cry. So the right place to look for a solution would be at select2 issues at github.

@zyadsherif

This comment has been minimized.

Copy link

@zyadsherif zyadsherif commented Jul 6, 2014

Thanks man, saved me an hour of boring code

@soyuka

This comment has been minimized.

Copy link

@soyuka soyuka commented Aug 26, 2014

thanks !

@dgmstuart

This comment has been minimized.

Copy link

@dgmstuart dgmstuart commented Aug 27, 2014

Awesome - really useful! Thanks so much.

@cviebrock Would you mind if I make a pull request for this to be integrated into the select2-rails gem? That gem already has stylesheets for boostrap

@eckoSantoso

This comment has been minimized.

Copy link

@eckoSantoso eckoSantoso commented Sep 14, 2014

Nice man, very2 thanks

@aboudreault

This comment has been minimized.

Copy link

@aboudreault aboudreault commented Oct 4, 2014

Thank you!!

@juceveju

This comment has been minimized.

Copy link

@juceveju juceveju commented Apr 13, 2015

great job,thanks

@adedip

This comment has been minimized.

Copy link

@adedip adedip commented May 27, 2015

I'm using select2 v.4.0.0 and I have a problem finding select2.png, it's not in the package. Anyway I'm using the one still present in select2 v.3.5.2 thanks.

@serglo

This comment has been minimized.

Copy link

@serglo serglo commented Jun 17, 2015

Hey cviebrock can you maybe update your snippet to match select2 v.4.0.0 style?

@jjmartinr01

This comment has been minimized.

Copy link

@jjmartinr01 jjmartinr01 commented Jul 18, 2015

Thank you very much! It would be a good idea to update your work in order to be usable with select2 4.0.
Let me know if I can help you in any way.

@hnguyen-fe

This comment has been minimized.

Copy link

@hnguyen-fe hnguyen-fe commented Aug 17, 2015

Anybody have any working css for v.4.0.0? This is completely broken for it.

@Younesi

This comment has been minimized.

Copy link

@Younesi Younesi commented Oct 25, 2015

Any Idea how to make it right-to-left compatible ?

@huglester

This comment has been minimized.

Copy link

@huglester huglester commented Mar 10, 2016

Hello,

maybe any updates on this? Foundation 6

@quarantaquatro

This comment has been minimized.

Copy link

@quarantaquatro quarantaquatro commented Mar 21, 2016

Does anybody use this or any alternative on Version 4.0.2? I dont get it done.

@felipefontoura

This comment has been minimized.

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