How to change the checkbox colors of select component in Vuetify 3?-CodePudding

In Vuetify 3, I am using the select component (multiple mode). I want to change the color of the checkboxes.

https://codepen.io/Sneaky6666/pen/RwJEePM?editors=101

You can see I set the color prop to red, but the checkboxes still show as black. How can I resolve this?

<script type="text/x-template" id="app-template">
  <v-app>
    <v-select
      v-model="select"
      :hint="`${select.state}, ${select.abbr}`"
      :items="items"
      item-title="state"
      item-value="abbr"
      label="Select"
      persistent-hint
      return-object
      single-line
              multiple
              color="red"
    ></v-select>
  </v-app>
</script>

<div id="app"></div>

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
  data () {
    return {
      select: { state: 'Florida', abbr: 'FL' },
      items: [
        { state: 'Florida', abbr: 'FL' },
        { state: 'Georgia', abbr: 'GA' },
        { state: 'Nebraska', abbr: 'NE' },
        { state: 'California', abbr: 'CA' },
        { state: 'New York', abbr: 'NY' },
      ],
    }
  },
}).use(vuetify).mount('#app')

CodePudding user response：

When you add props: {color:'red'} into every item in the items list, it sets red color of the checkbox and the list item if it is selected.

items: [
   { state: 'Florida', abbr: 'FL', props: {color:'red'} },
   { state: 'Georgia', abbr: 'GA', props: {color:'blue'} },
   { state: 'Nebraska', abbr: 'NE' },
   { state: 'California', abbr: 'CA' },
   { state: 'New York', abbr: 'NY' },
],

CodePudding user response：

The color prop will change the color of the text-field of the select-component, not the checkboxes.

You can try custom styling to change its color-

<style>
  .mdi-checkbox-marked {
    color: red !important;
  }
</style>