Change the style of v-select on selection

Question

I am working with Vuetify library and I am trying to overwrite properties of v-select once the user makes a selection, namely change the color of the border, color of text and color of the down icon. Here's the code for my v-select component.

<v-select
        :items="items"
        :label="$t('select.label.all')"
        :menu-props="{ offsetY: true }"
         multiple
        rounded
        solo
       :style="getSelectedStyle.style"
       @change="onChange"
></v-select>

on getSelectedStyle, I check whether anything is selected and try to OVERRIDE the following styles in the computer method:

  getSelectedStyle() {
            let result = {
                style: '',
            };

            if(this.selectedSkills){   
            result.style = `
                .v-text-field.v-text-field--solo .v-input__control {
                    border: 1px solid #3E82F1 !important;
                };

                i.v-icon.v-icon {
                    color: #3E82F1 !important;
                };

                .v-select__selection--comma,
                .v-select.v-text-field input {
                    color: #3E82F1 !important;
                }
            `;

            return result;
        },
    },

Unfortunately, the style OVERRIDE using the computed method doesn't work. Any ideas?

score 0 · Answer 1 · answered Jul 05 '21 at 18:28

Try this to change styles using classes

Codepen example

html
             <v-select
           :class="{'azul':!color, 'gris':color,}"
           :dark="color"
           :items="items"
           label="Standard"
           @change="color=true"
         ></v-select>

css

   .gris{
 background-color: gray;
 border: 1px solid red !important;
}

.azul{
 border: 2px solid red !important;
}

js

   new Vue({
 el: '#app',
 vuetify: new Vuetify(),
 data: () => ({
   items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
   color: false,
 }),
})

score 0 · Answer 2 · answered Jul 05 '21 at 22:59

Please see Vuetify v-select component width changing for an example of how to apply styles to inner elements of a Vuetify component.

If you apply the styles at the <v-select> level or in a style block, they need to be more specific that the Vuetify styles.

It's better to add the styles inline on the element, since that has highest priority, and use a single class that indicates the role, e.g. .v-input__control.

<!DOCTYPE html>
<html>

<head>
  <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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.0.1/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-select 
        ref="select"
        solo
        :items="items"
        label="Standard"
        @change="onChange(); applyCustomStyles();"
      ></v-select>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.1/dist/vuetify.js"></script>
  <script>
    const customStyles = {
      ".v-input__control": {
        border: "1px solid #3E82F1",
      },
      ".v-icon": {
        color: "#3E82F1",
      },
      ".v-select__selection--comma": {
        color: "#3E82F1",
      },
    };

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      mounted() {
        this.applyCustomStyles();
      },
      methods: {
        onChange() {
          console.log("onChange");
        },
        applyCustomStyles() {
          Vue.nextTick(() => {
            const vSelects = [].concat(this.$refs.select); // handle one or many selects
            vSelects.forEach((vSelect) => {
              Object.entries(customStyles).forEach(([selector, styles]) => {
                Object.entries(styles).forEach(([style, value]) => {
                  const element = vSelect.$el.querySelector(selector);
                  if (element) {                    // selector may not be present on mount
                    element.style[style] = value;
                  } else {
                    console.warn(`Could not find element "${selector}"`);
                  }
                });
              });
            });
          });
        },
      },
      data: () => ({
        items: ["Foo", "Bar", "Fizz", "Buzz"],
      }),
    })
  </script>
</body>

</html>

Change the style of v-select on selection

2 Answers2