title: Bootstrap 3 <select> move the dropdown arrow to the left and change the color of its block
body: <p>I am not sure if this is even possible but we have a normal  input with various options nested within it. It has a white background and the drop-down arrow (caret) is on the right. My client has asked me if I can swap the arrow to the left and change it's background colour. So far no luck in changing it, so if anyone can suggest a solution, that would be brilliant!</p>
  
  <p>The code is as below:</p>
  
  <pre><code>&lt;select id="categories"class="form-control" ng-model="type" ng-change="typeChange()"&gt;
    &lt;option value="silent"&gt;Show: Silent&lt;/option&gt;
    &lt;option value="live"&gt;Show: Live&lt;/option&gt;
    &lt;option value="buy it now"&gt;Show: Buy it now&lt;/option&gt;
    &lt;option value="pledge"&gt;Show: Pledge&lt;/option&gt;
    &lt;option value="sold"&gt;Show: Sold&lt;/option&gt;
    &lt;option value="winning"&gt;Show: Winning&lt;/option&gt;
    &lt;option value="losing"&gt;Show: Losing&lt;/option&gt;
    &lt;option value="favourites"&gt;Show: Favourites&lt;/option&gt;
    &lt;option value="current"&gt;Show: Current Bid Amount&lt;/option&gt;
    &lt;option value="" selected&gt;Show: All&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>As you can see it is an angular project, so I am looking for a solution that is ideally 100% CSS or perhaps JS and CSS.</p>