Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to change the font size of label in <v-checkbox> Vuetify?

I want to change the font size of "attendance",which is the content of label.

<v-checkbox
  v-model="course.evaluation"
  label="attendance"
></v-checkbox>

Here is what I've tried. Inside the same vue file, I added

<style>
.v-checkbox.v-label {
  font-size: 10px;
} 
</style>

But it didn't work. Anyone can help?

like image 527
Jefferson Avatar asked Oct 19 '25 04:10

Jefferson


1 Answers

Try increasing priority by adding chaining selectors

Add a class to the checkbox

<v-checkbox
  class="my-checkbox"
  v-model="course.evaluation"
  label="attendance"
></v-checkbox>

Then

<style>
.my-checkbox .v-label {
  font-size: 10px;
} 

or In case it still doesn't reflect the override then use deep selector

::v-deep .my-checkbox .v-label {
 font-size: 10px;
}
like image 64
Satyam Pathak Avatar answered Oct 22 '25 01:10

Satyam Pathak



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!