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

Posted 2023-03-05

【中文标题】Bootstrap 3 <select> 将下拉箭头向左移动并更改其块的颜色

【英文标题】：Bootstrap 3 <select> move the dropdown arrow to the left and change the color of its block

【发布时间】：2015-08-11 03:25:57

【问题描述】：

我不确定这是否可能，但我们有一个正常的输入，其中嵌套了各种选项。它具有白色背景，下拉箭头（插入符号）在右侧。我的客户问我是否可以将箭头向左交换并更改其背景颜色。到目前为止没有运气改变它，所以如果有人能提出解决方案，那就太棒了！

代码如下：

<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 的解决方案。

【问题讨论】：

对于向左的箭头使用direction: rtl;，但是文本会向右流动:) 对于背景select.form-control background-color: red; 如果你想要更多的控制你需要使用javascript，比如github.hubspot.com/select/docs/welcome

@Morpheus direction: rtl 非常棒而且直截了当，但我认为 Nick 也想改变箭头的样式（背景可能更多），我想这需要由 @987654322 完成@.

【参考方案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.

【讨论】：

谢谢，这是我要采用的解决方案 :-)

@NickLewis 很高兴我能帮上忙 :)

【参考方案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;