Как изменить цвет стрелок в Bootstrap Vue?

Question

У меня есть <b-form-select></b-form-select> in Bootstrap Vue и я хочу изменить цвет стрелок. Я много пробовал, но стрелки все еще остаются черными. Как я могу изменить их цвет?

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 вы можно сделать это без перезаписи - просто включите ваши модификации, которые перезаписывают значение default : https://bootstrap-vue.js.org/docs/reference/theming/

Answer 2

Попробуйте это с именем класса в вашем css стиле

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

Демо: https://jsfiddle.net/bardalesj/uwnp8efr/147/