Question

我在Bootstrap Vue中有一个const name = '${doc.data().firstName} ${doc.data().lastName}'，并且想更改箭头的颜色。我尝试了很多，但箭头仍然保持黑色。我该如何改变它们的颜色？

Answer 1

您必须更改.custom-select的背景

箭头颜色已更改：

new Vue({
  el: "#app",
  data() {
    return {
      selected: null,
      options: [{
          value: null,
          text: 'Please select an option'
        },
        {
          value: 'a',
          text: 'This is First option'
        },
        {
          value: 'b',
          text: 'Selected Option'
        },
        {
          value: {
            C: '3PO'
          },
          text: 'This is an option with object value'
        },
        {
          value: 'd',
          text: 'This one is disabled',
          disabled: true
        }
      ]
    }
  }
})

/* I changed the fill of the SVG to red */
.custom-select {
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='red' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px !important;

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <b-container>
    <b-row>
      <b-col>
        <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
        <b-form-select v-model="selected" :options="options"></b-form-select>
      </b-col>
    </b-row>
  </b-container>
</div>

这是 CSS 解决方案。

使用 SASS ，您可以执行此操作而不会覆盖-只需包含您的修改即可覆盖默认值：https://bootstrap-vue.js.org/docs/reference/theming/

Answer 2

使用您的CSS样式的

类名尝试一下

<b-form-select></b-form-select>

演示：https://jsfiddle.net/bardalesj/uwnp8efr/147/

如何在Bootstrap Vue中更改箭头颜色？

2 个答案: