Bootstrap 3 <select> move the dropdown arrow to the left and change the color of its block

Question

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!

The code is as below:

<select id="categories"class="form-control" ng-model="type" ng-change="typeChange()">
  <option value="silent">Show: Silent</option>
  <option value="live">Show: Live</option>
  <option value="buy it now">Show: Buy it now</option>
  <option value="pledge">Show: Pledge</option>
  <option value="sold">Show: Sold</option>
  <option value="winning">Show: Winning</option>
  <option value="losing">Show: Losing</option>
  <option value="favourites">Show: Favourites</option>
  <option value="current">Show: Current Bid Amount</option>
  <option value="" selected>Show: All</option>
</select>

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.

Solution 1

.styled-select #categories {
  background: transparent;
  width: 268px;
  padding: 5px 5px 5px 30px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
}
.styled-select {
  width: 240px;
  height: 34px;
  overflow: hidden;
  background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg)  no-repeat left #ddd;
  border: 1px solid #ccc;
}

<div class="styled-select">
  <select id="categories" class="form-control" ng-model="type" ng-change="typeChange()">
    <option value="silent">Show: Silent</option>
    <option value="live">Show: Live</option>
    <option value="buy it now">Show: Buy it now</option>
    <option value="pledge">Show: Pledge</option>
    <option value="sold">Show: Sold</option>
    <option value="winning">Show: Winning</option>
    <option value="losing">Show: Losing</option>
    <option value="favourites">Show: Favourites</option>
    <option value="current">Show: Current Bid Amount</option>
    <option value="" selected>Show: All</option>
  </select>
</div>

Basically the little arrow box is replaced by an image and I set it to the left side of the select box. This was from:

http://bavotasan.com/2011/style-select-box-using-only-css/

And from:

How to customized select element through css?

Brino provided another way to do it, but he left the original little arrow box at the right and the customized one at the left in his example. If you prefer that way you can use direction: rtl and have only 1 container for the select box. Here's his fiddle with the correction.

Solution 2

One solution is to hide the existing arrow, and add a new arrow with the appropriate css. I modified the code from this Answer.

See working example here.

HTML

<label class="custom-select">
        <select id="categories" class="form-control" ng-model="type" ng-change="typeChange()">
            <option value="silent">Show: Silent</option>
            <option value="live">Show: Live</option>
            <option value="buy it now">Show: Buy it now</option>
            <option value="pledge">Show: Pledge</option>
            <option value="sold">Show: Sold</option>
            <option value="winning">Show: Winning</option>
            <option value="losing">Show: Losing</option>
            <option value="favourites">Show: Favourites</option>
            <option value="current">Show: Current Bid Amount</option>
            <option value="" selected>Show: All</option>
        </select>
    </label>

CSS

label.custom-select {
    position: relative;
    display: inline-block;  
}

.custom-select select {
    padding-left: 20px; /*allows space for new arrow*/
    -webkit-appearance: none; /*removes original arrow*/
}

/* Select new arrow styling */
.custom-select:after {
    content: "▼";
    position: absolute;
    top: 0;
    left: 80;
    height: 100%;
    font-size: 60%;
    padding: 12px 7px;
    background: #000;
    color: white;
    pointer-events: none;
}

.no-pointer-events .custom-select:after {
    content: none;

}