Styling Chosen

Using libraries like Chosen is a good way to simplify your code. Otherwise difficult tasks can be completed in a matter of seconds. The main problem we find with libraries though is that their default styles almost never blend well with our own designs, in terms off color, size, shape or something else. Following up on Olivier’s blogpost about how to set up and use Chosen, we will try to fix that styling problem, step by step. If you prefer to read some code instead, have a look at the final application repository.

The basics

Styling Chosen can be achieved by overwritting some classes or simply providing a new stylesheet.

As shown in the default resources file for Chosen, there are 3 stylesheets that can be easily swapped to match your needs :

Chosen also uses a set of icons that you can change, to uzs GSSS Mixins instead.

Changing colors

Creating a custom stylesheet

In this first example, we will create a dark style for Chosen.

Screen Shot 2015-11-03 at 2.37.22 PM

We will copy the default colors.gss, create a new file with it in the CSS resources folder of our project, and call it chosenDarkColors.gss. We will fine tune the colors later, but to be sure that we are loading the new stylesheet, we should change at least one variable. Giving the #000 value for the CHZN_C_PRIMARY variable will do the trick.

Don’t forget to keep the @provide 'chosen-color';, otherwise it will crash.

Creating the associated resources file

In order to make our Chosen widgets use the new colors, we need to provide the widgets with a resources file that will make use of this new stylesheet, instead of the default one.

We only need to mimic the default resources file for Chosen, swapping the color.gss for the one we created, and providing the default files for the rest, using relative paths.

This new resources file then need to be loaded in the application via the ResourceLoader.

Loading the custom style

Now that we have our custom stylesheet and it is loaded into the application, it’s time to tell our Chosen widgets how to use all of this.

In the view file where the widgets are declared ( in this example), we will start by creating a variable containing the link to the newly created resource. Then, we will create the ChosenOptions object for our widgets (if it’s not already done) and pass it the new resources. And that’s it!

Go ahead and style! The hardest part – and I can’t help you with this – is choosing the right combinations of colors!

Changing the default style

You can use the same process seen previously in Changing colors to change anything defined in chosen.gss and mobile.gss.  Even better, you can overwrite only the part you want, so you don’t have to duplicate the whole stylesheet.


Styling Chosen is not that hard, in fact it can even be fun! I created an open project on Github with the completed dark style that we started working on (it is an example of the custom stylesheet approach) and, as a bonus, were are including a second color scheme called Unicorn style (you will have to run the application to see it in action).

Have fun styling!