html - Bootstrap 3 <select> 将下拉箭头向左移动并更改其 block 的颜色

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 .