Adding a CSS class to an HTML <input> element in Vuetify: A complete guide

Incorporating a <v-text-field> to collect user email addresses, I must append the ym-record-keys CSS class to the HTML <input> element in accordance with the Yandex Metrica guideline. My attempt resulted in the class being added to the parent div instead. How can I successfully add the ym-record-keys class to the input element?

<v-text-field
  v-model="item.customer.mail"
  type="email"
  :rules="emailRules"
  hide-details="auto"
  class="ym-record-keys"
  solo 
>
</v-text-field>

https://i.sstatic.net/1fAlF.png

The desired output should be:

<input id="input-1055" type="email" class="ym-record-keys">
cssvue.jsvuetify.jsyandex-metrika

Answer №1

I found myself in need of this functionality because a different plugin that I was utilizing required a specific class to be present on my input elements.

To address this issue, I developed a straightforward wrapper for Vuetify's v-text-field component, enabling the option to include a custom class for the input element:

Create a new component named TextInput.vue:

<script>
import { VTextField } from 'vuetify/lib';

export default {
  name: 'text-input',
  extends: VTextField,
  props: {
    inputClass: {
      note: 'A class that is applied to the input element',
    },
  },
  mounted() {
    // Adds the specified `class` to the input element if provided
    const inputEl = this.$el.querySelector('input');

    if (this.inputClass) {
      inputEl.classList.add(this.inputClass);
    }
  },
};
</script>

To use the component, simply follow this pattern:

<text-input v-model="myModel" input-class="my-css-class" />

This will result in your input field having the following structure:

<input id="idGeneratedFromVuetify" type="text" class="my-css-class">

If needed, feel free to customize this solution to accommodate other attributes or make it more dynamic using the spread operator with props.

Answer №2

If you want to apply a class, consider the options below

:class=["ym-record-keys"]

Alternatively,

:class="'ym-record-keys'"

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

AngularJS allows a function to return an array value, which can be displayed in separate blocks on

Building a program that involves working with an AngularJS array. I need to showcase the elements of the AngularJS array, returned by a function, in an organized manner. Each element should be displayed correspondingly - for example, 'first' cont ...

javascripthtmlcssangularjs

Issues with overlapping floating labels in Bootstrap 5

Is there a way to display longer text without it being cut off or truncated, especially in input fields where the full content is necessary for clarity? It can be frustrating when only part of the text is visible. This issue arises from the Bootstrap 5 e ...

csstwitter-bootstrapflexboxbootstrap-5floating-labels

how to arrange wordpress menu items in a vertical layout

Looking to display the sub-submenus of my site beneath their parent menu node similar to the layout of the Oracle website. Utilized a theme called Oracle, and it's visually appealing. Now, the goal is to exhibit the sub sub menus directly under their ...

htmlcsswordpresswordpress-theming

Use a Vue filter to refine search results by limiting the items displayed rather than expanding them

In my example, I have elements that need to be filtered. If the filter selection is precise, there should be very few or no items displayed because the conditions are rarely met. However, in the current source code, the filter is adding elements instead of ...

vue.jsfilter

Tips on toggling between slides with Bootstrap Carousel

I am in the process of designing a portfolio website and have encountered a challenge. I want to divide it into two sections - a brief introduction and a carousel for showcasing projects. While I have managed to set up both sections, I'm facing an iss ...

javascriptcssbootstrap-4carousel

Expanding Input Field to Fill Available Space Using Bootstrap

I have developed a sample here: jsFiddle <div class="container"> <div class="row"> <div class="span6"> <ul class="thumbnails"> <li class="span4"> <div style="height:200px; position: relative" ...

csstwitter-bootstrap

Issues with the background-image scroll feature not functioning as intended

Can anyone help me out with a CSS issue I'm having? I've set an image as my background on a webpage and I want it to scroll with the page. Even though I followed some online tutorials, it's still not working for me. It's been a while si ...

htmlcsspositionbackground-image

Resetting text in an input field using CSS

Here is the fiddle link for reference: http://jsfiddle.net/a765q/1/. I noticed that when I click the reset button, the text color changes to grey. Any ideas on how to fix this? ...

javascripthtmlcss

The functionality of the "#Next" and "#Prev" features in the Tiny carousel are currently not functioning properly within the MVC project

Looking to implement a simple content carousel using jQuery 2.1.3 in my project. Previously used a non-responsive jQuery content carousel and switched to find a responsive option:Tiny Carousel Added Tiny Carousel's .js and .css files to Bundles.confi ...

jquerycssasp.net-mvctwitter-bootstrapcarousel

Vue encountered an error: TypeError - _c is not recognized as a function

I recently created an icon library in Vue using Vue-cli and vue-svg-loader, and then exported it as a package. However, when I tried to use the icons like this: <template> <div> <MyIcon /> </div> </template> <scri ...

vue.jssvgnpmvue-cli

Is the append() function malfunctioning in jQuery?

Why is it copying two lines when I only want one line to be cloned on button click? Is there a way to make sure that only a single line is copied each time the button is clicked? Here is my code: $(function() { $('.add-more-room-btn').clic ...

javascripthtmljquerycss

Error message: "Encountered 'Cannot Get' error while building Angular

I encountered an error when trying to run my Angular project in IntelliJ. Upon opening the browser on localhost, I received the message Cannot GET / Here are the steps I followed: Opened up the project Ran npm install -g @angular/cli@latest Ran gradlew c ...

cssnode.jsangularwebpackangular-cli

Can a CSS class be designed to have a value that changes dynamically?

Let's say we have some div elements that look like this: <div class="mystyle-10">Padding 10px</div> <div class="mystyle-20">Padding 20px</div> <div class="mystyle-30">Padding 30px</div> Would it be possible to c ...

css

React Bootstrap's drop-down components with a dark theme

In my react application, I am looking to design a custom navbar for the header using react-bootstrap. Specifically, I need a dark styled NavDropdown that changes background color to #f0ad4e on hover. Despite attempting the following code snippet, I couldn& ...

cssreactjsreact-bootstrap

Materriel-UI ToggleButton has the appearance of a traditional button

Looking to style a ToggleButton like a button? Having trouble with an error in the console when nesting a button inside? Check out this solution: const StyledToggleButtonGroup = withStyles((theme) => ({ grouped: { margin: theme.spacing(0.5) ...

cssreactjsmaterial-ui

What steps should I follow to create a photo gallery similar to Facebook?

I am currently developing a 4x3 image gallery showcasing pictures sourced from a database. Each picture varies in size. Utilizing Bootstrap and CodeIgniter, I create rows and columns for each image. My goal is to ensure that wide images adjust to the heigh ...

phpcsscodeigniterimage-gallery

Tips for removing the extra space below an element within a details element

When I have a details element and try to set its height to 100%, there is some space below the element, even when tested with a textarea and div. https://i.sstatic.net/zZszF.png I am specifically talking about the space between the red border of the .log ...

htmlcss

What could be causing this slider to malfunction in Firefox?

I have recently developed a slider on this page: While the slider functions smoothly in Chrome, I am facing compatibility issues with Firefox. Can anyone shed some light on why this might be happening? Here is the HTML, CSS, and JS code used for the slid ...

javascriptjquerycsstwitter-bootstrap

Issue with Vue + Eslint: Setting lintOnSave=false does not disable linting, causing interruptions in development due to

After updating my packages, I started experiencing a browser overlay whenever there are linting errors during development. This issue occurred with a Vue 2 setup in the past, and unfortunately, now it's happening with Vue 3. While I appreciate the w ...

vue.jseslint

CSS PopUp positioning

Can anyone help me with applying the position top and bottom of header to the NewUser div? I've tried but it's not working. How can I add !important; to the CSS? Maybe something like $("header")!important} <div id="divNewUser" class="CreateUs ...

jqueryhtmlcss