2

I'm using the Chosen plugin to present five cascading drop lists on my webpage. I'd like to use different colours in each select box, however I can't seem to change the colour of the text.

        <script src="/includes/chosen.jquery.js"></script>

    <!--this select shows the options in red-->
    <select class="RedColour"  id="test1"><option value="1">One</option><option value="2">One</option><option value="1">Two</option><option value="3">Three</option></select>
    <!--however this "chosen one" does not-->
    <select class="chosen-select RedColour"  id="test2"><option value="1">One</option><option value="2">One</option><option value="1">Two</option><option value="3">Three</option></select>

    <script type="text/javascript">

    var config = {
        '.chosen-select': { inherit_select_classes: true },
        '.chosen-select-deselect': { allow_single_deselect: true, inherit_select_classes: true },
        '.chosen-select-no-single': { disable_search_threshold: 10, inherit_select_classes: true },
        '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
        '.chosen-select-width': { width: "95%" }

    }
    for (var selector in config) {
        $(selector).chosen(config[selector]);
    }

    </script>
j08691
  • 204,283
  • 31
  • 260
  • 272
DarkWheel
  • 21
  • 1
  • 3

1 Answers1

1

You can find a similar solution in this answer.

It's about bootstrap, I know, but the op gives a css with the classes that chosen is using. So the only thing that you have to do is taking that css and modifiy the attributes to meet you requirements.

Furthermore, you have another stylesheet for chosen in this link.

Community
  • 1
  • 1
Iván Rodríguez Torres
  • 4,293
  • 3
  • 31
  • 47