Question

我想将this icon添加到简单的Bootstrap 4选择中。所以它看起来更像是一个下拉列表。我怎么能这样做？

到目前为止，这是我的代码：

＆＃13;

.custom-select {
  background-color: #009CFF;
  color: #fff;
  text-transform: uppercase;
  background-image: none;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div>
  <select class="custom-select rounded-0 border-0">
    <option selected>Select</option>
    <i class="fa fa-angle-down" aria-hidden="true"></i>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

＆＃13;

该片段由于某种原因没有显示我的编辑器所做的更改。所以在这里，也可以在codepen版本中使用它。无论如何，我也试过像这样添加它，但是它没有工作：

.custom-select:after {
  content: "\f107";
  font-family: FontAwesome;
}

有人可以帮帮我吗？谢谢！

Answer 1

作为explained here，不可以设置HTML select元素的样式，包括使用伪:after和:before。

Answer 2

这可能是您正在寻找的bootstrap-select。

HTML：

<div class="container">
    <div class="row">
        <div class="col-4">
            <select id="mySelect" data-show-content="true" class="form-control">
                <option>Select..</option>
                <option data-content="<i class='fa fa-cutlery'></i> Cutlery"></option>
                <option data-content="<i class='fa fa-eye'></i> Eye"></option>
                <option data-content="<i class='fa fa-heart-o'></i> Heart"></option>
                <option data-content="<i class='fa fa-leaf'></i> Leaf"></option>
                <option data-content="<i class='fa fa-music'></i> Music"></option>
                <option data-content="<i class='fa fa-star'></i> Star"></option>
                <option data-content="<span class='badge badge-warning mt-1 ml-2 float-right'>3</span> More"></option>
            </select>
        </div>
    </div>
</div>

JS：

$('#mySelect').selectpicker();

将Font Awesome图标添加到Bootstrap 4选择

2 个答案: