CODEWITHSUNDEEP
cssvue.jsvuetify.js
Somethingwhatever
Somethingwhatever

Reputation: 1348

Change Vuetify checkbox label color?

I am using vuetify checkbox and i have set up a label but the label has a color:rgba(0,0,0.54) style applied to it which is quite light and i am trying to change the color to rgba:(0,0,0) but i am not able to target the .v-label theme--light class.

Check out this simple codepen

Check out this sample below:-

new Vue({
  el: "#app",
  data() {
    return {};
  }
});
.v-label theme--light {
  color: rgba(0, 0, 0) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-checkbox label="myLabel"></v-checkbox>
  </v-app>
</div>

Any help will be appreciated. Thank you.

Upvotes: 1

Views: 5331

Answers (4)

Nasser Boukehil
Nasser Boukehil

Reputation: 441

If you are using scss in your app, you can override vuetify styles with v-deep

.v-input--checkbox::v-deep {
  .v-label {
    color: rgba:(0,0,0);
  }
}

Upvotes: 0

Ho&#224;ng Ph&#249;ng
Ho&#224;ng Ph&#249;ng

Reputation: 11

i think you should use v-label and ::v-deep if you want change anything in vuetify, you should use ::v-deep. example: ` ::v-deep .v-label

Upvotes: 1

palaѕн
palaѕн

Reputation: 73896

You can add a class black-label to v-checkbox

<div id="app">
  <v-app id="inspire">
    <v-checkbox label="myLabel" class="black-label"></v-checkbox>
  </v-app>
</div>

and then update scoped style like:

<style scoped>
.black-label label {
    color: rgba(0, 0, 0) !important;
}
</style>

Demo:

new Vue({
  el: "#app",
  data() {
    return {};
  }
});
.black-label label {
    color: rgba(0, 0, 0) !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-checkbox label="myLabel" class="black-label"></v-checkbox>
  </v-app>
</div>

Upvotes: 2

Marco
Marco

Reputation: 7261

Change .v-label theme--light to .v-label.theme--light and it should work.

Upvotes: 1

Related Questions