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

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