The class for the Vuetify v-text-field component is not showing up

Struggling to include a class in v-text-field using Vuetify, only to find out that the class is missing when it renders in the DOM.

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

This is what I got:

<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>

Desiring to see the 'upper' class in the input field.

Answer №1

The CSS code is currently targeting

<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 it should be targeting
<input name="login" id="input-10" type="text">

To fix this, update your CSS code to:

.upper input { 
text-transform: uppercase;
 }

Answer №2

I have successfully tested your code and it is functioning well, but please note that it currently only applies to the placeholder text. If you want it to affect the input text itself, you will need to make the following adjustment:

.upper input {
    text-transform: uppercase;
}

You can view a live demo on JsFiddle here: https://jsfiddle.net/SilliconMachine/mrx041oL/3/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the name of the product from the corresponding parent element

My goal is to trigger an alert box with the product name when the "Buy now" button is clicked. I have added the necessary code in jquery to maintain the onclick event of the button. <h2 class="product-name"><a href="product1.php" title="Sample Pr ...

My React application is not displaying any content

All of my files are located in the same folder, and here is an overview of my code: index.js import { Keyboard, Inputarea } from "./ui.js"; import { createRoot } from "react-dom/client"; function Main() { return (<div> ...

Loop through data and use jQuery to insert it into the server

I am encountering an issue with my code as I attempt to insert data from a loop; unfortunately, I keep getting the error message "Uncaught TypeError: Illegal invocation". window.items = ''; _.forEach(cart.items, function(n, key) ...

Containers for Comparing Images are Unable to Flexibly Wrap

Check out my codepen project here: https://codepen.io/Bryandbronstein/pen/NLVQjB I've encountered a peculiar issue while experimenting with CSS and Javascript. I came across an image comparison slider on the W3C website that worked flawlessly as a si ...

What are some ways to ensure text stands out against a gradient backdrop?

Is there a way to ensure that text adjusts automatically to a background transition from one color to another using only CSS? I've tried using "mix-blend-mode:difference" from a forum, but it had no effect on the text. .container{ color: white; ...

Eliminate objects that have been clicked and deleted using the delete button component from the ul list using the filter feature in Vue

I've encountered an issue with Vue.js. Despite trying various methods I found, I'm unable to delete an element. I even consulted a chat GPT for assistance, but unfortunately, the provided answer did not solve my problem. Below is the code snippe ...

Using Angular: Dynamically load an external JavaScript file after the Component View has finished loading

In my Angular 5 application, I am faced with the challenge of loading a JavaScript script file dynamically after my component view has been fully loaded. This script is closely related to my component template, requiring the view to be loaded before it ca ...

Sending values from multiple radio groups in JavaScript can be done by accessing each group individually and extracting

This is an add to cart system. Currently, I am able to send quantity with an ID. However, I also want to send radio group values. How can I achieve this? Here are my codes: product.php <script> jQuery(function ($) { $('.popbutton').on(&a ...

What is the easiest way to choose a child vertex with just one click on mxgraph?

I have nested vertices and I'm looking to directly select the child vertex with just one click. Currently, when I click on a child vertex, it first selects the parent vertex instead. It's selecting the parent vertex initially: To select the ch ...

The output returned by an AngularJS controller

John Papa introduced the 'controller as' technique for AngularJS in his article titled Do You Like Your Angular Controllers with or without Sugar: myApp.controller("MainCtrl", [ function () { var vm = this; // using ViewModel conv ...

What is the method for generating a new array from an existing array?

I am trying to transform the data in this format: var routes: [{ locations: [ [40.749825, -73.090443], [42.743244, -71.594375], [37.058435, -74.903842] ], color: 'red', opacity: 1 }] from this initial format: var locations: [ ...

Tips for assigning the result of a Fetch API call to a variable

Hello everyone! I'm currently working on a project that requires me to retrieve the latitude or longitude of a location using the Google Maps API. However, I am facing an issue with returning values using the Fetch API and its promises. I have succe ...

Incorporating paperjs into a Vue.js application structured with Single File Components (SFC

I am working on a Vue.js project that consists of single file components. My goal is to incorporate a canvas and dynamically draw elements using Paper.js, utilizing the data within my component. Can you suggest the correct approach to achieve this? ...

Having trouble validating the input file in Laravel?

I am encountering an issue with validating a file input. The validation process consistently returns The given data was invalid., even when the provided file meets all of the validation criteria. It's worth noting that I am uploading multiple files si ...

A method for accessing a text file from a pastebin using CORS

My goal is to utilize CORS for fetching code snippets from a pastebin and then executing them in a web browser. Here is some work-in-progress code: http://www.example.com/code-snippets.html The code is syntax highlighted with options to run it, etc. I ...

The function fs.createReadStream does not exist

Snippet to Submit Career Form: import axios from 'axios'; import FormData from 'form-data'; var fs = require('fs'); submitCareerForm(e){ e.preventDefault(); let formData = new FormData(); //formdata obje ...

Is it possible to utilize an alias in conjunction with the NodeJS require function?

I have a JavaScript module written in ES6 that exports two constants: export const apple = "apple"; export const banana = "banana"; In another module, I can import these constants as follows: import { apple as a, banana as b } from 'fruits'; c ...

Identify the browser type and version using jQuery for optimal compatibility with responsive design

I am aiming to develop three unique design templates based on the browser version and size. Rather than relying solely on responsive design principles, I want the design to automatically adjust and apply the new layout when the user changes the browser siz ...

Even when template paths are specified, tailwindcss still remains unpurged

When running npm run build in production mode, I am encountering an issue where my Tailwind styles are not being purged. Despite filling the purge array in tailwind.config.js with template paths for webpack + postcss setup, I keep seeing the following warn ...

Webpack attempts to duplicate files prior to compilation but I am anticipating the opposite outcome

I needed the copy plugin to run after compilation, which seemed like the logical order. However, I found myself having to compile using webpack twice every time in order to get the fresh version on production. It wasn't until later that I realized it ...