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>

正如您所见，它是一个 Angular 项目，所以我正在寻找一个理想的 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/

来自：

How to customized select element through css?

Brino 提供了另一种方法，但在他的示例中，他将原始的小箭头框留在了右侧，将自定义的小箭头框留在了左侧。如果您更喜欢这种方式，您可以使用 direction: rtl 并且只有 1 个容器用于选择框。 Here's his fiddle with the correction.

Answer 2

一种解决方案是隐藏现有箭头，并使用适当的 css 添加一个新箭头。我修改了this Answer的代码。

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

}