resources/jquery.chosen/chosen.css

   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('chosen-sprite@2x.png') !important;
 436       background-repeat: no-repeat !important;
 437       background-size: 52px 37px !important;
 438   }
 439 }
 440 /* @end */