[Summary view] [Print] [Text view]

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