resources/jquery.chosen/chosen.css

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