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.[=13= 的解决方案]

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>

基本上小箭头框被替换为图像，我将其设置在 select 框的左侧。这来自：

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

来自：

How to customized select element through css?

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.

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;

}

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

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

html

css

forms

twitter-bootstrap

drop-down-menu