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;

}