CODEWITHSUNDEEP
cssnuxt.jsbootstrap-vue
Krzysztof Karczewski
Krzysztof Karczewski

Reputation: 63

How to change arrows color in Bootstrap Vue?

I have a <b-form-select></b-form-select> in Bootstrap Vue and would like to change color of arrows. I tried a lot but arrows still stay black. How can I change the color of them?

Upvotes: 1

Views: 4324

Answers (2)

muka.gergely
muka.gergely

Reputation: 8329

You have to change the background of your .custom-select

Arrow color changed:

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>

This is the CSS solution.

With SASS you can do this without overwriting - just include your modifications, and that overwrite the default value: https://bootstrap-vue.js.org/docs/reference/theming/

Upvotes: 3

Bardales
Bardales

Reputation: 324

Try this with a classname in your css style of

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

Demo: https://jsfiddle.net/bardalesj/uwnp8efr/147/

Upvotes: 0

Related Questions