What is the best way to update the color of a v-select component?

https://i.sstatic.net/6VOIo.png

Currently utilizing Vuetify for my project

<v-select id="makeMeBlue" dense outlined :items="form.values.urlTypes"
          label="Single or Multi URL" v-model="form.values.urlType" 
          :rules="form.rules.urlType">
</v-select>

In an attempt to change the color of my download button to blue, I need to alter:

  • The border
  • The text "Download As..."
  • The right down arrow

My attempted solutions include:

Inserting this code: color="blue" and applying this CSS styling

#makeMeBlue {
  color: blue; 
  border: blue 1px solid; 
}

Any suggestions on how to achieve this would be greatly appreciated.

javascriptvue.jsvuejs2vue-componentvuetify.js

Answer №1

You have the ability to customize Vuetify classes: (wrap your select in a div)

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      form: {values: {urlTypes: [1,2]}}
    }
  }
})
#makeMeBlue .v-label {
  color:blue !important;
}
#makeMeBlue .v-icon {
  color: blue !important;
}
#makeMeBlue .v-text-field--outlined fieldset {
  border: blue 1px solid !important; 
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04626b6a7044322a7c">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b3d3e2e3f222d320b796533">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
      <br />
      <div id="makeMeBlue">
        <v-select dense outlined :items="form.values.urlTypes" label="Download as ..." v-model="form.values.urlType" ></v-select>
      </div>
      </v-container>
    </v-main>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddaba8b89deff3a5">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcaaa9b9a8b5baa59ceef2a4">[email protected]</a>/dist/vuetify.js"></script>

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

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Currently, I am utilizing CodePen to assess my skills in creating a website. Specifically, I am focusing on the HTML component. My goal is to change the font color to blue for the phrase "Today is a beautiful sunny day!" Here is the snippet of code that I ...

javascripthtmlcss

Using Ajax to return a Post type in c# mvc 4 instead of a value

Hey there, I seem to be encountering an issue that I could use some help with. $.ajax({ type: "POST", url: "/controller/CreateList", contentType: "application/json; charset=utf-8", traditional: true, ...

c#javascriptjqueryajaxasp.net-mvc-4

Angular ng-repeat is incompatible with the JSON parser

I am facing an issue with accessing JSON objects and setting values into Angular Ui-grid. The problem arises when some of the fields in my JSON object are actually JSON strings. I attempted to convert these fields into JSON objects using JSON.parser, but e ...

javascriptangularjsjsonangular-ui-grid

Rotating an animated object in ThreeJs: A simple guide

I have modeled a spaceship in Blender, added some random wobbling and rotation animations to it, and then exported the 3D model to ThreeJs. When the user presses the LEFT ARROW key, I want the spaceship to rotate to the left on the X-Y plane, and similarl ...

javascriptanimationthree.js3drotation

When using `npm publish`, any files located within the `node_modules

After developing an npm package, I included some modules in the node_modules directory to make them accessible as "modules". For instance, I have a module called my-module.js in node_modules which I require in my code using require('my-module'). ...

javascriptnode.jsnpmpackage

I've been encountering a recurring issue of receiving NaN followed by a number in React. Any suggestions on how to resolve

click here to see the image const number = parseInt(props.detail.price,10) const toLocale = number.toLocaleString("ko-KR") console.log(toLocale) return ( <div> <Descriptions title="Product ...

javascriptreactjs

Empty Angular-chart.js Container

How can I resolve the issue of getting a blank div and no output while trying to display a chart where the options, labels, and other data are initialized in the TypeScript controller and then used on the HTML page? I added the angular-chart.js library us ...

javascriptangularjstypescriptangular-chart

Using a Javascript for loop to extract the initial event date from a Google Calendar

In my home.html file, the script below is responsible for: Connecting the website to a Google Calendar API Fetching dates and names of rocket launches My concern arises when a calendar for the same rocket has multiple launches in a single month. I aim fo ...

javascriptarraysjsonloopsgoogle-calendar-api

Generate a random number using the Math.random() method in Node.js/JavaScript to access a folder on the local machine

I am facing a challenge in reading a JSON file located deep within multiple folders on my local machine. The issue arises because the folder name where the file is stored changes every time, as it is generated using the Math.random() method with the prefix ...

javascriptnode.jsnodesnode-modules

Managing the position of the caret within a content-editable div

I need help with editing a contenteditable div in HTML <div contenteditable="true" id="TextOnlyPage"></div> Here is my jQuery code: var rxp = new RegExp("(([0-9]+\.?[0-9]+)|([0-9]+))", "gm"); $('#TextOnlyPage').keyup(function( ...

javascriptjqueryangularjscaret

Chrome autocomplete behaves as if the input fields are disabled and cannot be clicked on

I am experiencing an unusual issue with autofill in Chrome. After logging in and then logging out of the app, the input fields (email, password) are auto-filled but appear to be frozen and unclickable. This problem does not occur every time; it only happe ...

javascripthtmlangulargoogle-chromefrontend

I'm looking to display 9 images on a single page that rotate every 5 seconds between 3 different images. While I can figure out how to display one image easily, I'm

<script type="text/javascript"> var currPic = 1; var totPics = 9; var keepTime; function setupPicChange() { keepTime = setTimeout("changePic()", 5000); } function changePic() { currPic++; if (currPic > totPics) currPic = 1; var f ...

javascriptjqueryimagetimer

Is it possible to design a collapsible element that gives a sneak peek of its content before fully expanding?

In the title, I mentioned that I require the collapsible to display its content partially before expanding and then fully after expanding. To illustrate this concept, here are two drawings for reference: https://i.sstatic.net/f4CHh.png https://i.sstatic. ...

javascript

Locating every quadrilateral within a mesh

I'm currently using Three.js to load a mesh and I am attempting to texture each quad individually. At the moment, I am able to texture each face (triangle), but I am unsure of how to determine if the current triangle and the last triangle are part of ...

javascriptthree.jsmesh

Adding data to a multidimensional array in JavaScript

I am in need of creating a multidimensional JavaScript array dynamically, following this specific structure: array_answers[0][1]:"yes" array_answers[1][2]:"no" array_answers[2][2-subquestion]:"text input" array_answers[3][8]:"yes" array_answers[4] ...

javascriptjqueryarrays

Should using module.export = [] be avoided?

Having two modules that both need access to a shared array can be tricky. One way to handle this is by creating a separate module just for the shared array, like so: sharedArray.js module.exports = []; In your module files, you can then use it like this ...

javascriptnode.js

How can I dynamically adjust an element's attribute as a user scrolls past it (creating a sticky effect)?

For instance, when you visit and try scrolling up, you will notice a bar displaying: "Typography Code Tables Forms Buttons Icons by Glyphicons" As you continue to scroll past the element, a class is added to alter the appearance. However, as you scrol ...

javascriptjquery

An Issue with Selenium IDE Extension Utilizing JavaScript File

As a beginner in Selenium, I am currently exploring the Selenium tool: beginners guide book to learn more about it. The book explains how to utilize the Selenium IDE Extension by using a .js file to store JS functions. An example provided in the book was ...

javascriptseleniumselenium-ide

An old-school Ajax request abruptly interrupted halfway through

function submitLogin(){ var username = document.getElementById('username').value; var password = document.getElementById('password').value; var testlabel = document.getElementById('testlabel').value; ...

javascriptajax

What role does NPM play in the deployment of a Node.js App with AWS Beanstalk?

I'm interested in the workflow of an AWS Beanstalk deployment, particularly regarding the installation of packages. I assume that npm is used during the process to install packages on the server(s). However, I am curious to know if AWS Beanstalk utili ...

javascriptamazon-web-servicesnpmamazon-elastic-beanstalk