9 .chzn-container .chzn-drop {
11 border: 1px solid
#aaa;
16 -webkit-box-shadow: 0 4px 5px rgba
(0,0,0,.15);
17 -moz-box-shadow : 0 4px 5px rgba
(0,0,0,.15);
18 -o-box-shadow : 0 4px 5px rgba
(0,0,0,.15);
19 box-shadow : 0 4px 5px rgba
(0,0,0,.15);
24 /* @group Single Chosen */
25 .chzn-container-single .chzn-single {
26 background-color: #ffffff;
27 filter: progid:DXImageTransform
.Microsoft
.gradient
( startColorstr
='#ffffff', endColorstr
='#eeeeee', GradientType
=0 );
28 background-image: -webkit-gradient
(linear
, 0% 0%, 0% 100%, color-stop
(20%, #ffffff), color-stop
(50%, #f6f6f6), color-stop
(52%, #eeeeee), color-stop
(100%, #f4f4f4));
29 background-image: -webkit-linear-gradient
(top
, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
30 background-image: -moz-linear-gradient
(top
, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
31 background-image: -o-linear-gradient
(top
, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
32 background-image: -ms-linear-gradient
(top
, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
33 background-image: linear-gradient
(top
, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
34 -webkit-border-radius: 5px;
35 -moz-border-radius : 5px;
37 -moz-background-clip : padding
;
38 -webkit-background-clip: padding-box
;
39 background-clip : padding-box
;
40 border: 1px solid
#aaaaaa;
41 -webkit-box-shadow: 0 0 3px #ffffff inset
, 0 1px 1px rgba
(0,0,0,0.1);
42 -moz-box-shadow : 0 0 3px #ffffff inset
, 0 1px 1px rgba
(0,0,0,0.1);
43 box-shadow : 0 0 3px #ffffff inset
, 0 1px 1px rgba
(0,0,0,0.1);
52 text-decoration: none
;
54 .chzn-container-single .chzn-default {
57 .chzn-container-single .chzn-single span {
62 -o-text-overflow: ellipsis
;
63 -ms-text-overflow: ellipsis
;
64 text-overflow: ellipsis
;
66 .chzn-container-single .chzn-single abbr {
74 background: url
('../img/../img/chosen-sprite.png') right top no-repeat
;
76 .chzn-container-single .chzn-single abbr:hover {
77 background-position: right
-11px;
79 .chzn-container-single.chzn-disabled .chzn-single abbr:hover {
80 background-position: right top
;
82 .chzn-container-single .chzn-single div {
90 .chzn-container-single .chzn-single div b {
91 background: url
('../img/chosen-sprite.png') no-repeat
0 0;
96 .chzn-container-single .chzn-search {
103 .chzn-container-single .chzn-search input {
104 background: #fff url
('../img/chosen-sprite.png') no-repeat
100% -22px;
105 background: url
('../img/chosen-sprite.png') no-repeat
100% -22px, -webkit-gradient
(linear
, 0% 0%, 0% 100%, color-stop
(1%, #eeeeee), color-stop
(15%, #ffffff));
106 background: url
('../img/chosen-sprite.png') no-repeat
100% -22px, -webkit-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
107 background: url
('../img/chosen-sprite.png') no-repeat
100% -22px, -moz-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
108 background: url
('../img/chosen-sprite.png') no-repeat
100% -22px, -o-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
109 background: url
('../img/chosen-sprite.png') no-repeat
100% -22px, -ms-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
110 background: url
('../img/chosen-sprite.png') no-repeat
100% -22px, linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
112 padding: 4px 20px 4px 5px;
114 border: 1px solid
#aaa;
115 font-family: sans-serif
;
118 .chzn-container-single .chzn-drop {
119 -webkit-border-radius: 0 0 4px 4px;
120 -moz-border-radius : 0 0 4px 4px;
121 border-radius : 0 0 4px 4px;
122 -moz-background-clip : padding
;
123 -webkit-background-clip: padding-box
;
124 background-clip : padding-box
;
128 .chzn-container-single-nosearch .chzn-search input {
133 /* @group Multi Chosen */
134 .chzn-container-multi .chzn-choices {
135 background-color: #fff;
136 background-image: -webkit-gradient
(linear
, 0% 0%, 0% 100%, color-stop
(1%, #eeeeee), color-stop
(15%, #ffffff));
137 background-image: -webkit-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
138 background-image: -moz-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
139 background-image: -o-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
140 background-image: -ms-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
141 background-image: linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
142 border: 1px solid
#aaa;
147 height: auto
!important
;
151 .chzn-container-multi .chzn-choices li {
155 .chzn-container-multi .chzn-choices .search-field {
160 .chzn-container-multi .chzn-choices .search-field input {
162 background: transparent
!important
;
163 border: 0 !important
;
164 font-family: sans-serif
;
170 -webkit-box-shadow: none
;
171 -moz-box-shadow : none
;
172 -o-box-shadow : none
;
175 .chzn-container-multi .chzn-choices .search-field .default {
178 .chzn-container-multi .chzn-choices .search-choice {
179 -webkit-border-radius: 3px;
180 -moz-border-radius : 3px;
182 -moz-background-clip : padding
;
183 -webkit-background-clip: padding-box
;
184 background-clip : padding-box
;
185 background-color: #e4e4e4;
186 filter: progid:DXImageTransform
.Microsoft
.gradient
( startColorstr
='#f4f4f4', endColorstr
='#eeeeee', GradientType
=0 );
187 background-image: -webkit-gradient
(linear
, 0% 0%, 0% 100%, color-stop
(20%, #f4f4f4), color-stop
(50%, #f0f0f0), color-stop
(52%, #e8e8e8), color-stop
(100%, #eeeeee));
188 background-image: -webkit-linear-gradient
(top
, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
189 background-image: -moz-linear-gradient
(top
, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
190 background-image: -o-linear-gradient
(top
, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
191 background-image: -ms-linear-gradient
(top
, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
192 background-image: linear-gradient
(top
, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
193 -webkit-box-shadow: 0 0 2px #ffffff inset
, 0 1px 0 rgba
(0,0,0,0.05);
194 -moz-box-shadow : 0 0 2px #ffffff inset
, 0 1px 0 rgba
(0,0,0,0.05);
195 box-shadow : 0 0 2px #ffffff inset
, 0 1px 0 rgba
(0,0,0,0.05);
197 border: 1px solid
#aaaaaa;
199 padding: 3px 20px 3px 5px;
200 margin: 3px 0 3px 5px;
204 .chzn-container-multi .chzn-choices .search-choice-focus {
207 .chzn-container-multi .chzn-choices .search-choice .search-choice-close {
215 background: url
('../img/chosen-sprite.png') right top no-repeat
;
217 .chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
218 background-position: right
-11px;
220 .chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close {
221 background-position: right
-11px;
226 .chzn-container .chzn-results {
233 -webkit-overflow-scrolling: touch
;
235 .chzn-container-multi .chzn-results {
239 .chzn-container .chzn-results li {
246 .chzn-container .chzn-results .active-result {
250 .chzn-container .chzn-results .highlighted {
251 background-color: #3875d7;
252 filter: progid:DXImageTransform
.Microsoft
.gradient
( startColorstr
='#3875d7', endColorstr
='#2a62bc', GradientType
=0 );
253 background-image: -webkit-gradient
(linear
, 0% 0%, 0% 100%, color-stop
(20%, #3875d7), color-stop
(90%, #2a62bc));
254 background-image: -webkit-linear-gradient
(top
, #3875d7 20%, #2a62bc 90%);
255 background-image: -moz-linear-gradient
(top
, #3875d7 20%, #2a62bc 90%);
256 background-image: -o-linear-gradient
(top
, #3875d7 20%, #2a62bc 90%);
257 background-image: -ms-linear-gradient
(top
, #3875d7 20%, #2a62bc 90%);
258 background-image: linear-gradient
(top
, #3875d7 20%, #2a62bc 90%);
261 .chzn-container .chzn-results li em {
265 .chzn-container .chzn-results .highlighted em {
266 background: transparent
;
268 .chzn-container .chzn-results .no-results {
272 .chzn-container .chzn-results .group-result {
277 .chzn-container .chzn-results .group-option {
280 .chzn-container-multi .chzn-drop .result-selected {
283 .chzn-container .chzn-results-scroll {
288 width: 321px; /* This should by dynamic with js */
291 .chzn-container .chzn-results-scroll span {
292 display: inline-block
;
294 text-indent: -5000px;
297 .chzn-container .chzn-results-scroll-down {
300 .chzn-container .chzn-results-scroll-down span {
301 background: url
('../img/chosen-sprite.png') no-repeat
-4px -3px;
303 .chzn-container .chzn-results-scroll-up span {
304 background: url
('../img/chosen-sprite.png') no-repeat
-22px -3px;
309 .chzn-container-active .chzn-single {
310 -webkit-box-shadow: 0 0 5px rgba
(0,0,0,.3);
311 -moz-box-shadow : 0 0 5px rgba
(0,0,0,.3);
312 -o-box-shadow : 0 0 5px rgba
(0,0,0,.3);
313 box-shadow : 0 0 5px rgba
(0,0,0,.3);
314 border: 1px solid
#5897fb;
316 .chzn-container-active .chzn-single-with-drop {
317 border: 1px solid
#aaa;
318 -webkit-box-shadow: 0 1px 0 #fff inset
;
319 -moz-box-shadow : 0 1px 0 #fff inset
;
320 -o-box-shadow : 0 1px 0 #fff inset
;
321 box-shadow : 0 1px 0 #fff inset
;
322 background-color: #eee;
323 filter: progid:DXImageTransform
.Microsoft
.gradient
( startColorstr
='#eeeeee', endColorstr
='#ffffff', GradientType
=0 );
324 background-image: -webkit-gradient
(linear
, 0% 0%, 0% 100%, color-stop
(20%, #eeeeee), color-stop
(80%, #ffffff));
325 background-image: -webkit-linear-gradient
(top
, #eeeeee 20%, #ffffff 80%);
326 background-image: -moz-linear-gradient
(top
, #eeeeee 20%, #ffffff 80%);
327 background-image: -o-linear-gradient
(top
, #eeeeee 20%, #ffffff 80%);
328 background-image: -ms-linear-gradient
(top
, #eeeeee 20%, #ffffff 80%);
329 background-image: linear-gradient
(top
, #eeeeee 20%, #ffffff 80%);
330 -webkit-border-bottom-left-radius : 0;
331 -webkit-border-bottom-right-radius: 0;
332 -moz-border-radius-bottomleft : 0;
333 -moz-border-radius-bottomright: 0;
334 border-bottom-left-radius : 0;
335 border-bottom-right-radius: 0;
337 .chzn-container-active .chzn-single-with-drop div {
338 background: transparent
;
341 .chzn-container-active .chzn-single-with-drop div b {
342 background-position: -18px 1px;
344 .chzn-container-active .chzn-choices {
345 -webkit-box-shadow: 0 0 5px rgba
(0,0,0,.3);
346 -moz-box-shadow : 0 0 5px rgba
(0,0,0,.3);
347 -o-box-shadow : 0 0 5px rgba
(0,0,0,.3);
348 box-shadow : 0 0 5px rgba
(0,0,0,.3);
349 border: 1px solid
#5897fb;
351 .chzn-container-active .chzn-choices .search-field input {
352 color: #111 !important
;
356 /* @group Disabled Support */
359 opacity:0.5 !important
;
361 .chzn-disabled .chzn-single {
364 .chzn-disabled .chzn-choices .search-choice .search-choice-close {
368 /* @group Right to Left */
369 .chzn-rtl { text-align: right
; }
370 .chzn-rtl .chzn-single { padding: 0 8px 0 0; overflow: visible
; }
371 .chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; direction: rtl
; }
373 .chzn-rtl .chzn-single div { left: 3px; right: auto
; }
374 .chzn-rtl .chzn-single abbr {
378 .chzn-rtl .chzn-choices .search-field input { direction: rtl
; }
379 .chzn-rtl .chzn-choices li { float: right
; }
380 .chzn-rtl .chzn-choices .search-choice { padding: 3px 5px 3px 19px; margin: 3px 5px 3px 0; }
381 .chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 4px; right: auto
; background-position: right top
;}
382 .chzn-rtl.chzn-container-single .chzn-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; }
383 .chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 15px; }
384 .chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none
; }
385 .chzn-rtl .chzn-search input {
386 background: #fff url
('../img/chosen-sprite.png') no-repeat
-38px -22px;
387 background: url
('../img/chosen-sprite.png') no-repeat
-38px -22px, -webkit-gradient
(linear
, 0% 0%, 0% 100%, color-stop
(1%, #eeeeee), color-stop
(15%, #ffffff));
388 background: url
('../img/chosen-sprite.png') no-repeat
-38px -22px, -webkit-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
389 background: url
('../img/chosen-sprite.png') no-repeat
-38px -22px, -moz-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
390 background: url
('../img/chosen-sprite.png') no-repeat
-38px -22px, -o-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
391 background: url
('../img/chosen-sprite.png') no-repeat
-38px -22px, -ms-linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
392 background: url
('../img/chosen-sprite.png') no-repeat
-38px -22px, linear-gradient
(top
, #eeeeee 1%, #ffffff 15%);
393 padding: 4px 5px 4px 20px;