How to style select2?

[naresh.a...@gmail.com]

What is the recommended approach for styling a select2 control? Say I want to increase the font size and color, also want to change the background color and the drop down icon. Attached is an example of what I am trying to do. Note that the background color of the window is the same as background color of the dropdown - in a way, making the drop-down's border disappear.

Thanks in advance for your help.

[Igor Vaynberg]

use css. you can specify a custom css class using containerCssClass
and dropdownCssClass options.

-igor

On Tue, May 21, 2013 at 4:53 PM, <naresh.a...@gmail.com> wrote:
> What is the recommended approach for styling a select2 control? Say I want to increase the font size and color, also want to change the background color and the drop down icon. Attached is an example of what I am trying to do. Note that the background color of the window is the same as background color of the dropdown - in a way, making the drop-down's border disappear.
>
> Thanks in advance for your help.
>

> --
> You received this message because you are subscribed to the Google Groups "select2" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to select2+u...@googlegroups.com.
> To post to this group, send email to sel...@googlegroups.com.
> Visit this group at http://groups.google.com/group/select2?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[naresh.a...@gmail.com]

I tried adding a custom containerCssClass shown below, but can't figure out how to change the background color to grey. Any ideas how to do this:

.my-select2-container {
background-color: #666;
}

[naresh.a...@gmail.com]

Never mind! I needed to set the background property, not just the background-color property.

.my-select2-container {
background: #666;
}