如何更改 vuetify 复选框标签样式？

Question

Could anyone explain me how to set the css to the vuetify checkbox? I would like to change the font, it's size etc. but i have no idea how to access it in the style section. Here's my checkbox:

<v-checkbox
  class="type-box"
  dense
  v-for="type in feedTypeFilterList"
  :key="type.name"
  v-model="type.isSelected"
  :label="type.name"
/>

Thanks for any help.

Answer 1

I'm not sure if this is the right way to do it. But with Vuetify you can also use slots.

This way you can use add a label and style it however you want.

<v-checkbox>
  <template v-slot:label>
    <span id="checkboxLabel">Label Content</span>
  </template>
</v-checkbox>

<style>
#checkboxLabel {
   color: blue;
   font-size: 16px;
}
</style>

Let me know if there is anything else!

Answer 2

official example for custom label

I think, This is more useful. If you want to use vue well, you have to use slot well. It makes you more productive.

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-checkbox v-model="checkbox">
        <template v-slot:label>
          <div>
            I agree that
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <a
                  target="_blank"
                  href="http://vuetifyjs.com"
                  @click.stop
                  v-on="on"
                >
                  Vuetify
                </a>
              </template>
              Opens in new window
            </v-tooltip>
            is awesome
          </div>
        </template>
      </v-checkbox>
    </v-container>
  </v-app>
</div>

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      checkbox: false,
    }
  },
})
</script>

Answer 3

Vuetify has very high specificity on the CSS, but it's quite easy to override using ::deep .

Here I've set the color and font-size to be the same for the checkbox and the label text. This color styling will only affect the unchecked checkbox. In order to get the white also for the checked checkbox (including the animation between states), you should add color="white" on the v-checkbox as well.

Add checkbox in the template

Here, color="white" controls the color of the checked checkbox, not the unchecked.

<v-checkbox
  v-model="theModel"
  color="white"
  label="This text will soon be white"
/>

Using SCSS, the styling would look like this

Using :deep overrides the vuetify styling, allowing you to create the look you want

.v-input--checkbox::v-deep {
  .v-label, .v-icon {
    color: white;
    font-size: 22px;
  }
}