[Summary view] [Print] [Text view]

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