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

User · Answer

This is how i changed placeholder arrow color  the 2 classes are for dropdown open and dropdown closed  you need to change the  fff to the color you want    select2-container--default select2-container--open  select2-selection--single  select2-selection  arrow b       border-color  transparent transparent  fff transparent  important         select2-container--default  select2-selection--single  select2-selection  arrow b       border-color   fff transparent transparent transparent  important

User · Answer

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

User · Answer

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   lt i class  fa fa-angle-down  gt  lt  i gt       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   lt i class  fa fa-angle-down  gt  lt  i gt

[css] Styling of Select2 dropdown select boxes

Examples related to css

Examples related to jquery-select2