Bootstrap 3 <select>將下拉箭頭向左移動並更改其塊的顏色

Question

我不確定這是否可能，但我們有一個正常的輸入，其中嵌套了各種選項。 它有一個白色背景，下拉箭頭（插入符號）在右邊。 我的客戶問我是否可以將箭頭換到左邊並更改它的背景顏色。 到目前為止，改變它沒有運氣，所以如果有人能提出解決方案，那就太棒了！

代碼如下：

<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>

你可以看到它是一個角度項目，所以我正在尋找一個理想的100％CSS或JS和CSS的解決方案。

Answer 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> 

基本上，小箭頭框由圖像替換，我將其設置在選擇框的左側。 這來自：

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

來自：

如何通過css自定義選擇元素？

Brino提供了另一種方法，但是他在右邊留下了原來的小箭盒，在他的例子中左邊是自定義的那個。 如果你喜歡這種方式，你可以使用direction: rtl並且只有一個容器用於選擇框。 這是他糾正的小提琴 。

Answer 2

一種解決方案是隱藏現有箭頭，並添加帶有適當css的新箭頭。 我修改了這個答案中的代碼。

請參閱此處的工作示例

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;

}