css - Styling of Select2 dropdown select boxes -

css - Styling of Select2 dropdown select boxes -

i'm using select2 in project style select boxes in search form. managed alter gradient background of arrow container black gradient:

class="lang-css prettyprint-override">.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 arrow white, unfortunately select2 using background image different icons instead of font-awesome or similar, there's no way alter color css.

what easiest way create arrow white instead of default grey? have replace background png (select2.png , select2x2.png) own? or there easier method?

another question have how alter height of select boxes. know how alter height of dropdown box in opened state, want alter height of selectbox in closed state. ideas?

thanks suggestions in comments. made bit of dirty hack want without having create own image. javascript first hide default tag that's beingness used downwards arrow, so:

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

i included font-awesome in page , add together own downwards arrow, 1 time again line of javascript, replace default one:

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

then css style select boxes. set height, alter background color of arrow area gradient black, alter width, font-size , color of downwards arrow 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 styling way want it:

update 5/6/2015 @katie lacy mentioned in other reply classnames have been changed in version 4 of select2. updated css new classnames should 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; }

css jquery-select2