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%);
…
}| Comment | File | Size | Author |
|---|---|---|---|
| chosen-colors.jpg | 12.35 KB | asb |