Input label font-size of v-text-field in Vuetify
在 Vuetify 中針對 v-text-field 要修改標題 Label 字型大小, 如下表單中的 label="Account*"
& label="E-mail*"
有兩種方法
<template> <span> <v-form ref="form" v-model="valid" lazy-validation> <v-container> <v-row> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="user.username" :counter="50" :rules="nameRules" label="Account*" required ></v-text-field> </v-col> <v-col cols="12" sm="6" md="4"> <v-text-field v-model="user.email" :rules="emailRules" label="E-mail*" required ></v-text-field> </v-col> </v-row> </v-container> </v-form> </span> </template>
第一種: 直接在本身檔案裡加入下方的 style lang="scss" scoped
, 這表示只有此頁面有作用
<style lang="scss" scoped> ::v-deep .v-label { font-size: 1em } ::v-deep .v-label--active { font-size: 1.25em; font-weight: bold; } </style>
第二種: 寫在全域檔案裡, 這時要在 css 中加入 !important
, 這樣的話, 所有的頁面都會一致.
## Input Label .v-input .v-label { font-size: 1em !important; } .v-input .v-label--active { font-size: 1.25em !important; font-weight: bold !important; }
參考:
VueJS deep selector
你必須 登入 才能發表評論。