Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change font-size of <v-radio> vuetify

I am newly using vuetify. I want to change font-size of <v-radio> button and its label. Directly applying css not working. So i searched for some answer, but those answer are very short. Which i'm unable to apply them. Can anyone help me to explain how do i change font-size in vuetify? TIA

Updated:

<template>
<v-flex xs6>
    <p class="title-input">Jenis Kelamin</p>
    <v-radio-group id="id-gender" class="no-space" v-model="genderSelect" :mandatory="false" row @change="genderAction">
       <v-radio class="gender" label="Pria" value="Pria"></v-radio>
       <v-radio class="gender" label="Wanita" value="Wanita"></v-radio>
    </v-radio-group>
    <span class="text-error" v-show="genderError">Mohon diisi</span>
</v-flex>
</template>

<style scoped src="../style/Shortform.css">

</style>
like image 588
Alauddin Ahmed Avatar asked Mar 22 '18 05:03

Alauddin Ahmed


Video Answer


2 Answers

Got the answer. In my css file all i have to do is

.customClass >>> label

adding those >>> icon solved the problem.

like image 53
Alauddin Ahmed Avatar answered Oct 24 '22 07:10

Alauddin Ahmed


If you want to use a style tag in the .vue file you have the option to remove scoped from the style tag and target the label directly.

<style>
  .v-label {
    font-size: desired size
  }
</style>

If it happens that you have a separate .css file you can still use this method and ignore the <style> tag

.v-label {
  font-size: desired size
}
like image 43
kiarathedev Avatar answered Oct 24 '22 09:10

kiarathedev