Styling of Select2 dropdown select boxes

Question

I'm using Select2 in a project to style some select boxes in a search form. I managed to change the gradient background of the arrow container to a black gradient:

.select2-container .select2-choice .select2-arrow {     background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));     background-image: -moz-linear-gradient(top, #424242, #030303);     background-image: -ms-linear-gradient(top, #424242, #030303);     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));     background-image: -webkit-linear-gradient(top, #424242, #030303);     background-image: -o-linear-gradient(top, #424242, #030303);     background-image: linear-gradient(#424242, #030303); } 

I would like the arrow to be white, but unfortunately Select2 is using a background image for the different icons instead of font-awesome or something similar, so there's no way to just change the color with CSS.

What would be the easiest way to make the arrow white instead of the default grey? Do I really have to replace the background png (select2.png and select2x2.png) with my own? Or is there an easier method?

Another question I have is how to change the height of the select boxes. I know how to change the height of the dropdown box in opened state, but I want to change the height of the selectbox in closed state. Any ideas?

Answer 1

Thanks for the suggestions in the comments. I made a bit of a dirty hack to get what I want without having to create my own image. With javascript I first hide the default tag that's being used for the down arrow, like so:

$('b[role="presentation"]').hide(); 

I then included font-awesome in my page and add my own down arrow, again with a line of javascript, to replace the default one:

$('.select2-arrow').append('<i class="fa fa-angle-down"></i>'); 

Then with CSS I style the select boxes. I set the height, change the background color of the arrow area to a gradient black, change the width, font-size and also the color of the down arrow to white:

.select2-container .select2-choice {     padding: 5px 10px;     height: 40px;     width: 132px;      font-size: 1.2em;   }  .select2-container .select2-choice .select2-arrow {     background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));     background-image: -moz-linear-gradient(top, #424242, #030303);     background-image: -ms-linear-gradient(top, #424242, #030303);     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));     background-image: -webkit-linear-gradient(top, #424242, #030303);     background-image: -o-linear-gradient(top, #424242, #030303);     background-image: linear-gradient(#424242, #030303);     width: 40px;     color: #fff;     font-size: 1.3em;     padding: 4px 12px; } 

The result is the styling the way I want it:

Update 5/6/2015 As @Katie Lacy mentioned in the other answer the classnames have been changed in version 4 of Select2. The updated CSS with the new classnames should look like this:

.select2-container--default .select2-selection--single{     padding:6px;     height: 37px;     width: 148px;      font-size: 1.2em;       position: relative; }  .select2-container--default .select2-selection--single .select2-selection__arrow {     background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));     background-image: -moz-linear-gradient(top, #424242, #030303);     background-image: -ms-linear-gradient(top, #424242, #030303);     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));     background-image: -webkit-linear-gradient(top, #424242, #030303);     background-image: -o-linear-gradient(top, #424242, #030303);     background-image: linear-gradient(#424242, #030303);     width: 40px;     color: #fff;     font-size: 1.3em;     padding: 4px 12px;     height: 27px;     position: absolute;     top: 0px;     right: 0px;     width: 20px; } 

JS:

$('b[role="presentation"]').hide(); $('.select2-selection__arrow').append('<i class="fa fa-angle-down"></i>'); 

Answer 2

Here is a working example of above. http://jsfiddle.net/z7L6m2sc/ Now select2 has been updated the classes have change may be why you cannot get it to work. Here is the css....

.select2-dropdown.select2-dropdown--below{     width: 148px !important; }  .select2-container--default .select2-selection--single{     padding:6px;     height: 37px;     width: 148px;      font-size: 1.2em;       position: relative; }  .select2-container--default .select2-selection--single .select2-selection__arrow {     background-image: -khtml-gradient(linear, left top, left bottom, from(#424242), to(#030303));     background-image: -moz-linear-gradient(top, #424242, #030303);     background-image: -ms-linear-gradient(top, #424242, #030303);     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #424242), color-stop(100%, #030303));     background-image: -webkit-linear-gradient(top, #424242, #030303);     background-image: -o-linear-gradient(top, #424242, #030303);     background-image: linear-gradient(#424242, #030303);     width: 40px;     color: #fff;     font-size: 1.3em;     padding: 4px 12px;     height: 27px;     position: absolute;     top: 0px;     right: 0px;     width: 20px; }