title: Styling of Select2 dropdown select boxes
body: <p>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:</p>
  
  <pre class="lang-css prettyprint-override"><code>.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);
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>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?</p>