Select2 CSS for Zurb Foundation 5

select2-foundation5.css

/*
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;
  }
}

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.

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.

Thanks man, saved me an hour of boring code

thanks !

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

Nice man, very2 thanks

Thank you!!

great job,thanks

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.

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

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.

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

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

Hello,

maybe any updates on this? Foundation 6

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

I found this https://gist.github.com/icyz/abd2582c90e7535016d0