CODEWITHSUNDEEP
javascriptcssvue.js
Emer Alexander Alvarado Rivera
Emer Alexander Alvarado Rivera

Reputation: 69

Vuetify component v-text-field is not getting class

I'm trying to add class to v-text-field in vuetify, but when it is rendering to the dom, I realized that the input does not have the class.

   <v-text-field label="Login" class="upper" name="login" prepend-icon="person" type="text" v-model="usuario"></v-text-field>

I got this:

<div class="v-input upper v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted">
<div class="v-input__prepend-outer">
<div class="v-input__icon v-input__icon--prepend">
<i aria-hidden="true" class="v-icon notranslate material-icons theme--light">person</i>
</div>
</div>
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-text-field__slot">
<label for="input-10" class="v-label v-label--active theme--light" style="left: 0px; right: auto; position: absolute;">Login</label><input name="login" id="input-10" type="text"></div></div><div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper">
</div></div></div></div></div>

I want the upper class in the input field.

Upvotes: 0

Views: 3669

Answers (2)

SiliconMachine
SiliconMachine

Reputation: 606

Your code is working for me, but it applies only to the placeholder. If you want to apply it to the input text you need to do the following:

.upper input {
    text-transform: uppercase;
}

Here you have a working JsFiddle: https://jsfiddle.net/SilliconMachine/mrx041oL/3/

Upvotes: 1

Tom Marienfeld
Tom Marienfeld

Reputation: 716

The CSS code is applied on <div class="v-input upper v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted"> but needs to be applied to <input name="login" id="input-10" type="text">

Change your CSS code to:

.upper input { 
text-transform: uppercase;
 }

Upvotes: 2

Related Questions