Skip to content

Instantly share code, notes, and snippets.

@cviebrock
Created December 20, 2013 15:56
Show Gist options
  • Save cviebrock/8056741 to your computer and use it in GitHub Desktop.
Save cviebrock/8056741 to your computer and use it in GitHub Desktop.
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
Copy link

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
Copy link

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
Copy link

Thanks man, saved me an hour of boring code

@soyuka
Copy link

soyuka commented Aug 26, 2014

thanks !

@dgmstuart
Copy link

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
Copy link

Nice man, very2 thanks

@aboudreault
Copy link

Thank you!!

@juceveju
Copy link

great job,thanks

@adedip
Copy link

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.

@serg0x
Copy link

serg0x commented Jun 17, 2015

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

@jjmartinr01
Copy link

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
Copy link

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

@Younesi
Copy link

Younesi commented Oct 25, 2015

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

@huglester
Copy link

Hello,

maybe any updates on this? Foundation 6

@quarantaquatro
Copy link

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

@felipefontoura
Copy link

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