5 vertical-align: middle;
9 -webkit-user-select: none;
10 -moz-user-select: none;
13 .chosen-container .chosen-drop {
18 -webkit-box-sizing: border-box;
19 -moz-box-sizing: border-box;
20 box-sizing: border-box;
22 border: 1px solid #aaa;
25 box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
27 .chosen-container.chosen-with-drop .chosen-drop {
35 /* @group Single Chosen */
36 .chosen-container-single .chosen-single {
42 border: 1px solid #aaa;
44 background-color: #fff;
45 background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
46 background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
47 background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
48 background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
49 background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
50 background-clip: padding-box;
51 box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
53 text-decoration: none;
57 .chosen-container-single .chosen-default {
60 .chosen-container-single .chosen-single span {
64 text-overflow: ellipsis;
67 .chosen-container-single .chosen-single-with-deselect span {
70 .chosen-container-single .chosen-single abbr {
77 background: url('chosen-sprite.png') -42px 1px no-repeat;
80 .chosen-container-single .chosen-single abbr:hover {
81 background-position: -42px -10px;
83 .chosen-container-single.chosen-disabled .chosen-single abbr:hover {
84 background-position: -42px -10px;
86 .chosen-container-single .chosen-single div {
94 .chosen-container-single .chosen-single div b {
98 background: url('chosen-sprite.png') no-repeat 0px 2px;
100 .chosen-container-single .chosen-search {
107 .chosen-container-single .chosen-search input[type="text"] {
108 -webkit-box-sizing: border-box;
109 -moz-box-sizing: border-box;
110 box-sizing: border-box;
112 padding: 4px 20px 4px 5px;
116 border: 1px solid #aaa;
117 background: white url('chosen-sprite.png') no-repeat 100% -20px;
118 background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
119 background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
120 background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
121 background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
122 background: url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eeeeee 1%, #ffffff 15%);
124 font-family: sans-serif;
128 .chosen-container-single .chosen-drop {
130 border-radius: 0 0 4px 4px;
131 background-clip: padding-box;
133 .chosen-container-single.chosen-container-single-nosearch .chosen-search {
140 .chosen-container .chosen-results {
147 -webkit-overflow-scrolling: touch;
149 .chosen-container .chosen-results li {
156 .chosen-container .chosen-results li.active-result {
160 .chosen-container .chosen-results li.disabled-result {
165 .chosen-container .chosen-results li.highlighted {
166 background-color: #3875d7;
167 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
168 background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
169 background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
170 background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
171 background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
174 .chosen-container .chosen-results li.no-results {
178 .chosen-container .chosen-results li.group-result {
183 .chosen-container .chosen-results li.group-option {
186 .chosen-container .chosen-results li em {
188 text-decoration: underline;
192 /* @group Multi Chosen */
193 .chosen-container-multi .chosen-choices {
196 -webkit-box-sizing: border-box;
197 -moz-box-sizing: border-box;
198 box-sizing: border-box;
202 height: auto !important;
204 border: 1px solid #aaa;
205 background-color: #fff;
206 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
207 background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
208 background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
209 background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
210 background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
213 .chosen-container-multi .chosen-choices li {
217 .chosen-container-multi .chosen-choices li.search-field {
222 .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
227 border: 0 !important;
228 background: transparent !important;
232 font-family: sans-serif;
236 .chosen-container-multi .chosen-choices li.search-field .default {
239 .chosen-container-multi .chosen-choices li.search-choice {
241 margin: 3px 0 3px 5px;
242 padding: 3px 20px 3px 5px;
243 border: 1px solid #aaa;
245 background-color: #e4e4e4;
246 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
247 background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
248 background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
249 background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
250 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
251 background-clip: padding-box;
252 box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
257 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
264 background: url('chosen-sprite.png') -42px 1px no-repeat;
267 .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
268 background-position: -42px -10px;
270 .chosen-container-multi .chosen-choices li.search-choice-disabled {
272 border: 1px solid #ccc;
273 background-color: #e4e4e4;
274 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
275 background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
276 background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
277 background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
278 background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
281 .chosen-container-multi .chosen-choices li.search-choice-focus {
284 .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
285 background-position: -42px -10px;
287 .chosen-container-multi .chosen-results {
291 .chosen-container-multi .chosen-drop .result-selected {
299 .chosen-container-active .chosen-single {
300 border: 1px solid #5897fb;
301 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
303 .chosen-container-active.chosen-with-drop .chosen-single {
304 border: 1px solid #aaa;
305 -moz-border-radius-bottomright: 0;
306 border-bottom-right-radius: 0;
307 -moz-border-radius-bottomleft: 0;
308 border-bottom-left-radius: 0;
309 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
310 background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
311 background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
312 background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
313 background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
314 box-shadow: 0 1px 0 #fff inset;
316 .chosen-container-active.chosen-with-drop .chosen-single div {
318 background: transparent;
320 .chosen-container-active.chosen-with-drop .chosen-single div b {
321 background-position: -18px 2px;
323 .chosen-container-active .chosen-choices {
324 border: 1px solid #5897fb;
325 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
327 .chosen-container-active .chosen-choices li.search-field input[type="text"] {
328 color: #111 !important;
332 /* @group Disabled Support */
334 opacity: 0.5 !important;
337 .chosen-disabled .chosen-single {
340 .chosen-disabled .chosen-choices .search-choice .search-choice-close {
345 /* @group Right to Left */
349 .chosen-rtl .chosen-single {
353 .chosen-rtl .chosen-single span {
358 .chosen-rtl .chosen-single-with-deselect span {
361 .chosen-rtl .chosen-single div {
365 .chosen-rtl .chosen-single abbr {
369 .chosen-rtl .chosen-choices li {
372 .chosen-rtl .chosen-choices li.search-field input[type="text"] {
375 .chosen-rtl .chosen-choices li.search-choice {
376 margin: 3px 5px 3px 0;
377 padding: 3px 5px 3px 19px;
379 .chosen-rtl .chosen-choices li.search-choice .search-choice-close {
383 .chosen-rtl.chosen-container-single-nosearch .chosen-search,
384 .chosen-rtl .chosen-drop {
387 .chosen-rtl.chosen-container-single .chosen-results {
391 .chosen-rtl .chosen-results li.group-option {
395 .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
398 .chosen-rtl .chosen-search input[type="text"] {
399 padding: 4px 5px 4px 20px;
400 background: white url('chosen-sprite.png') no-repeat -30px -20px;
401 background: url('chosen-sprite.png') no-repeat -30px -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
402 background: url('chosen-sprite.png') no-repeat -30px -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
403 background: url('chosen-sprite.png') no-repeat -30px -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
404 background: url('chosen-sprite.png') no-repeat -30px -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
405 background: url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%);
408 .chosen-rtl.chosen-container-single .chosen-single div b {
409 background-position: 6px 2px;
411 .chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
412 background-position: -12px 2px;
416 /* @group Retina compatibility */
417 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
418 .chosen-rtl .chosen-search input[type="text"],
419 .chosen-container-single .chosen-single abbr,
420 .chosen-container-single .chosen-single div b,
421 .chosen-container-single .chosen-search input[type="text"],
422 .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
423 .chosen-container .chosen-results-scroll-down span,
424 .chosen-container .chosen-results-scroll-up span {
425 background-image: url('chosen-sprite@2x.png') !important;
426 background-size: 52px 37px !important;
427 background-repeat: no-repeat !important;