The 'Chosen' module modifies the behaviour of the element select:visible; it is a "Select Box Enhancer for jQuery and Prototype" which is based on a external library (https://github.com/harvesthq/chosen). Also it applies it's own color scheme, which clashes with Slate's dark (inverted) colors. That results in a dropdown that is hardly readable (cf. screenshot).

I assume that 'Chosen' fails to adapt to the theme's colors. However, there are the Drupal-specific CSS fixes for the Chosen module in ./sites/all/modules/chosen/css/chosen-drupal.css, so this maybe could be fixed within the Drupal integration module.

The color scheme comes with the library (./sites/all/libraries/chosen/chosen.css). It has lots of declarations like this:

.chosen-container .chosen-results li.highlighted {
  background-color: #3875d7;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
  background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%);
  background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%);
  background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%);
  background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
  color: #fff;
}

.chosen-container-multi .chosen-choices {
…
  background-color: #fff;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
  background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%);
  background-image: linear-gradient(#eeeeee 1%, #ffffff 15%);
…
}
CommentFileSizeAuthor
chosen-colors.jpg12.35 KBasb