blob: 6b46b0a75e54be41c9d6e540ef561480ab68724f [file] [log] [blame]
lh9ed821d2023-04-07 01:36:19 -07001/* @group Multi Chosen */
2.chosen-container-multi .chosen-choices li {
3 float: left;
4 list-style: none;
5}
6
7.chosen-container-multi .chosen-choices {
8 position: relative;
9 overflow: hidden;
10 margin: 0;
11 padding: 0 5px;
12 width: 100%;
13 height: auto;
14 border: 1px solid #aaa;
15 background-color: #fff;
16 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
17 background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
18 background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
19 background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
20 background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
21 cursor: text;
22}
23
24.chosen-container-multi .chosen-choices li.search-field {
25 margin: 0;
26 padding: 0;
27 white-space: nowrap;
28}
29
30.chosen-container-multi .chosen-choices li.search-choice {
31 position: relative;
32 margin: 3px 5px 3px 0;
33 padding: 3px 20px 3px 5px;
34 border: 1px solid #aaa;
35 max-width: 100%;
36 border-radius: 3px;
37 background-color: #eeeeee;
38 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));
39 background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
40 background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
41 background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
42 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
43 background-size: 100% 19px;
44 background-repeat: repeat-x;
45 background-clip: padding-box;
46 box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
47 color: #333;
48 line-height: 13px;
49 cursor: default;
50}
51
52.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
53 margin: 1px 0;
54 padding: 5px;
55 height: 25px;
56 outline: 0;
57 border: 0 !important;
58 background: transparent !important;
59 box-shadow: none;
60 color: #999;
61 font-size: 100%;
62 font-family: sans-serif;
63 line-height: normal;
64 border-radius: 0;
65}
66
67.chosen-container-multi .chosen-choices li.search-choice span {
68 word-wrap: break-word;
69}
70
71.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
72 background-position: -42px -10px;
73}
74
75.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
76 position: absolute;
77 top: 4px;
78 right: 3px;
79 display: block;
80 width: 12px;
81 height: 12px;
82 background: url('../pic/select-sprite.png') -42px 1px no-repeat;
83 font-size: 1px;
84}
85
86.chosen-container-multi .chosen-choices li.search-choice-focus {
87 background: #d4d4d4;
88}
89
90.chosen-container-multi .chosen-choices li.search-choice-disabled {
91 padding-right: 5px;
92 border: 1px solid #ccc;
93 background-color: #e4e4e4;
94 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));
95 background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
96 background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
97 background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
98 background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
99 color: #666;
100}
101
102.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
103 background-position: -42px -10px;
104}
105
106.chosen-container-multi .chosen-drop .result-selected {
107 display: list-item;
108 color: #ccc;
109 cursor: default;
110}
111
112.chosen-container-multi .chosen-results {
113 margin: 0;
114 padding: 0;
115}
116/* @end */
117
118/* @group Single Chosen */
119.chosen-container-single .chosen-default {
120 color: #999;
121}
122
123.chosen-container-single .chosen-single {
124 position: relative;
125 display: block;
126 overflow: hidden;
127 padding: 0 0 0 8px;
128 height: 25px;
129 border: 1px solid #aaa;
130 border-radius: 5px;
131 background-color: #fff;
132 background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
133 background: -webkit-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
134 background: -moz-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
135 background: -o-linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
136 background: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
137 background-clip: padding-box;
138 box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1);
139 color: #444;
140 text-decoration: none;
141 white-space: nowrap;
142 line-height: 24px;
143}
144
145.chosen-container-single .chosen-single span {
146 display: block;
147 overflow: hidden;
148 margin-right: 26px;
149 text-overflow: ellipsis;
150 white-space: nowrap;
151}
152
153.chosen-container-single .chosen-single abbr {
154 position: absolute;
155 top: 6px;
156 right: 26px;
157 display: block;
158 width: 12px;
159 height: 12px;
160 background: url('../pic/select-sprite.png') -42px 1px no-repeat;
161 font-size: 1px;
162}
163
164.chosen-container-single .chosen-single-with-deselect span {
165 margin-right: 38px;
166}
167
168.chosen-container-single.chosen-disabled .chosen-single abbr:hover {
169 background-position: -42px -10px;
170}
171
172.chosen-container-single .chosen-single abbr:hover {
173 background-position: -42px -10px;
174}
175
176.chosen-container-single .chosen-single div b {
177 display: block;
178 width: 100%;
179 height: 100%;
180 background: url('../pic/select-sprite.png') no-repeat 0px 2px;
181}
182
183.chosen-container-single .chosen-single div {
184 position: absolute;
185 top: 0;
186 right: 0;
187 display: block;
188 width: 18px;
189 height: 100%;
190}
191
192.chosen-container-single .chosen-search input[type="text"] {
193 margin: 1px 0;
194 padding: 4px 20px 4px 5px;
195 width: 100%;
196 height: auto;
197 outline: 0;
198 border: 1px solid #aaa;
199 background: white url('../pic/select-sprite.png') no-repeat 100% -20px;
200 background: url('../pic/select-sprite.png') no-repeat 100% -20px;
201 font-size: 1em;
202 font-family: sans-serif;
203 line-height: normal;
204 border-radius: 0;
205}
206
207.chosen-container-single .chosen-search {
208 position: relative;
209 z-index: 1010;
210 margin: 0;
211 padding: 3px 4px;
212 white-space: nowrap;
213}
214
215.chosen-container-single.chosen-container-single-nosearch .chosen-search {
216 position: absolute;
217 left: -9999px;
218}
219
220.chosen-container-single .chosen-drop {
221 margin-top: -1px;
222 border-radius: 0 0 4px 4px;
223 background-clip: padding-box;
224}
225/* @end */
226
227/* @group Active */
228.chosen-container-active.chosen-with-drop .chosen-single div {
229 border-left: none;
230 background: transparent;
231}
232.chosen-container-active.chosen-with-drop .chosen-single div b {
233 background-position: -18px 2px;
234}
235
236.chosen-container-active .chosen-single {
237 border: 1px solid #5897fb;
238 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
239}
240
241.chosen-container-active.chosen-with-drop .chosen-single {
242 border: 1px solid #aaa;
243 -moz-border-radius-bottomright: 0;
244 border-bottom-right-radius: 0;
245 -moz-border-radius-bottomleft: 0;
246 border-bottom-left-radius: 0;
247 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
248 background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%);
249 background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%);
250 background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%);
251 background-image: linear-gradient(#eeeeee 20%, #ffffff 80%);
252 box-shadow: 0 1px 0 #fff inset;
253}
254
255.chosen-container-active .chosen-choices li.search-field input[type="text"] {
256 color: #222 !important;
257}
258
259.chosen-container-active .chosen-choices {
260 border: 1px solid #5897fb;
261 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
262}
263/* @end */
264
265/* @group Right to Left */
266.chosen-rtl .chosen-single-with-deselect span {
267 margin-left: 38px;
268}
269.chosen-rtl .chosen-single div {
270 right: auto;
271 left: 3px;
272}
273.chosen-rtl .chosen-single abbr {
274 right: auto;
275 left: 26px;
276}
277.chosen-rtl .chosen-choices li {
278 float: right;
279}
280.chosen-rtl .chosen-choices li.search-field input[type="text"] {
281 direction: rtl;
282}
283.chosen-rtl .chosen-choices li.search-choice {
284 margin: 3px 5px 3px 0;
285 padding: 3px 5px 3px 19px;
286}
287.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
288 right: auto;
289 left: 4px;
290}
291
292.chosen-rtl {
293 text-align: right;
294}
295
296.chosen-rtl .chosen-single {
297 overflow: visible;
298 padding: 0 8px 0 0;
299}
300
301.chosen-rtl .chosen-single span {
302 margin-right: 0;
303 margin-left: 26px;
304 direction: rtl;
305}
306
307.chosen-rtl.chosen-container-single-nosearch .chosen-search,
308.chosen-rtl .chosen-drop {
309 left: 9999px;
310}
311.chosen-rtl.chosen-container-single .chosen-results {
312 margin: 0 0 4px 4px;
313 padding: 0 4px 0 0;
314}
315.chosen-rtl .chosen-results li.group-option {
316 padding-right: 15px;
317 padding-left: 0;
318}
319.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
320 border-right: none;
321}
322.chosen-rtl .chosen-search input[type="text"] {
323 padding: 4px 5px 4px 20px;
324 background: white url('../pic/select-sprite.png') no-repeat -30px -20px;
325 background: url('../pic/select-sprite.png') no-repeat -30px -20px;
326 direction: rtl;
327}
328.chosen-rtl.chosen-container-single .chosen-single div b {
329 background-position: 6px 2px;
330}
331.chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b {
332 background-position: -12px 2px;
333}
334/* @end */
335
336/* @group Results */
337.chosen-container .chosen-results li {
338 display: none;
339 margin: 0;
340 padding: 5px 6px;
341 list-style: none;
342 line-height: 15px;
343 word-wrap: break-word;
344 -webkit-touch-callout: none;
345}
346.chosen-container .chosen-results li.active-result {
347 display: list-item;
348 cursor: pointer;
349}
350
351.chosen-container .chosen-results li.highlighted {
352 background-color: #3875d7;
353 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
354 background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
355 background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
356 background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
357 background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
358 color: #fff;
359}
360
361.chosen-container .chosen-results li.disabled-result {
362 display: list-item;
363 color: #ccc;
364 cursor: default;
365}
366
367.chosen-container .chosen-results li.group-result {
368 display: list-item;
369 font-weight: bold;
370 cursor: default;
371}
372
373.chosen-container .chosen-results li.group-option {
374 padding-left: 15px;
375}
376
377.chosen-container .chosen-results li.no-results {
378 color: #777;
379 display: list-item;
380 background: #f4f4f4;
381}
382
383.chosen-container .chosen-results li em {
384 font-style: normal;
385 text-decoration: underline;
386}
387
388.chosen-container .chosen-results {
389 color: #444;
390 position: relative;
391 overflow-x: hidden;
392 overflow-y: auto;
393 margin: 0 4px 4px 0;
394 padding: 0 0 0 4px;
395 max-height: 240px;
396 -webkit-overflow-scrolling: touch;
397}
398/* @end */
399
400/* @group Disabled Support */
401.chosen-disabled .chosen-choices .search-choice .search-choice-close {
402 cursor: default;
403}
404
405.chosen-disabled .chosen-single {
406 cursor: default;
407}
408
409.chosen-disabled {
410 opacity: 0.5 !important;
411 cursor: default;
412}
413/* @end */
414
415/* @group Base */
416.chosen-container * {
417 -webkit-box-sizing: border-box;
418 -moz-box-sizing: border-box;
419 box-sizing: border-box;
420}
421
422.chosen-container.chosen-with-drop .chosen-drop {
423 left: 0;
424}
425
426.chosen-container {
427 position: relative;
428 display: inline-block;
429 vertical-align: middle;
430 font-size: 13px;
431 -webkit-user-select: none;
432 -moz-user-select: none;
433 user-select: none;
434}
435
436.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
437 content: ":";
438 padding-left: 2px;
439 vertical-align: top;
440}
441
442.chosen-container .chosen-drop {
443 position: absolute;
444 top: 100%;
445 left: -9999px;
446 z-index: 1010;
447 width: 100%;
448 border: 1px solid #aaa;
449 border-top: 0;
450 background: #fff;
451 box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
452}
453
454.chosen-container a {
455 cursor: pointer;
456}
457
458.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
459 margin-right: 4px;
460 overflow: hidden;
461 white-space: nowrap;
462 text-overflow: ellipsis;
463 font-weight: normal;
464 color: #999999;
465}
466/* @end */
467
468/* @group Retina compatibility */
469@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
470 .chosen-rtl .chosen-search input[type="text"],
471 .chosen-container-single .chosen-single abbr,
472 .chosen-container-single .chosen-single div b,
473 .chosen-container-single .chosen-search input[type="text"],
474 .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
475 .chosen-container .chosen-results-scroll-down span,
476 .chosen-container .chosen-results-scroll-up span {
477 background-image: url('../pic/select-sprite@2x.png') !important;
478 background-size: 52px 37px !important;
479 background-repeat: no-repeat !important;
480 }
481}
482/* @end */