inverted label Vuetify

Question

When I copy and paste any code from vuetify Label is reversed but in codepen works normal. I’ve tried to set in Style to customize but it doesn’t work. because it has to fix the fields also. How do you maintain the label to the left?

Online example

---

<template>
    <v-form v-model="valid">
      <v-container>
        <v-row>
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="firstname"
              :rules="nameRules"
              :counter="10"
              label="First name"
              required
            ></v-text-field>
          </v-col>
  
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="lastname"
              :rules="nameRules"
              :counter="10"
              label="Last name"
              required
              outlined
            ></v-text-field>
          </v-col>
  
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="email"
              :rules="emailRules"
              label="E-mail"
              required
            ></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
</template>

<style scope>
    label{
        left: 0 !important;
        right: auto!important;
    }
    .v-label--active{
        transform: translateY(-25px)translateX(-12px) scale(.75)!important;
    }
</style>

Answer 1

Is missing the tag after Templete, It is required for the entire app, without it does not work. Follow the documentation for you to take a look:

Documentation v-app

<template>
<v-app>
    <v-form v-model="valid">
        <v-container>
            <v-row>
                <v-col cols="12" md="4">
                    <v-text-field
                        v-model="firstname"
                        :rules="nameRules"
                        :counter="10"
                        label="First name"
                        required
                    ></v-text-field>
                </v-col>

                <v-col cols="12" md="4">
                    <v-text-field
                        v-model="lastname"
                        :rules="nameRules"
                        :counter="10"
                        label="Last name"
                        required
                        outlined
                    ></v-text-field>
                </v-col>

                <v-col cols="12" md="4">
                    <v-text-field
                        v-model="email"
                        :rules="emailRules"
                        label="E-mail"
                        required
                    ></v-text-field>
                </v-col>
            </v-row>
        </v-container>
    </v-form>
</v-app>