[Vuejs]-How can I overwrite the border color of a disabled input of Vuetify?

by

3👍

edit

as igor has mentioned below, you should use .type-input.v-input--is-disabled fieldset as your CSS selector to be most specific.

you need to win the "specifity war" in order to solve this. so if you’ll use .v-text-field--outlined fieldset as you css selector, it should work.

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <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.x/dist/vuetify.min.css" rel="stylesheet">
    
    
    <template id="mainbox">
      <v-container>
        <v-row>
          <v-col cols="12">
            <v-card outlined>
    
    
              <div class="text-overline mb-4">
                {{ title }}
              </div>
    
              <!-- -------------------------------------------------------------------------- -->
              <div class="py-10"></div>
              <!-- -------------------------------------------------------------------------- -->
              <!-- TEST CODE -->
              <!-- --------- -->
              
              
              <v-text-field class="type-input" dense outlined v-model="type" label="Change my border please" disabled></v-text-field>
    
    
    
              <!-- -------------------------------------------------------------------------- -->
              <div class="py-10"></div>
              <!-- -------------------------------------------------------------------------- -->
              <!-- END TEST CODE -->
              <!-- --------- -->
    
    
    
    
            </v-card>
    
          </v-col>
        </v-row>
      </v-container>
    </template>
    
    
    <v-app id="app">
    
    
      <!-- -------------------------------------------------------------------------- -->
      <!-- TITLE -->
      <!-- ----- -->
    
    
    
      <mainbox title="$CODE_08" />
    
    
      <!-- -------------------------------------------------------------------------- -->
    
    
    </v-app>
    
    <script type="text/javascript">
      const mainbox = Vue.component('mainbox', {
        template: '#mainbox',
        props: {
          title: String
        },
        data() {
          return {
            showAppBar: true,
            alert: true,
            alertColor: 'green',
            alertMessage: 'Success Message Test .... !!!! '
          }
        },
        methods: {
          doSomething() {
    
            this.showAppBar = !this.showAppBar
    
            this.alert = true,
              this.alertColor = 'green',
              this.alertMessage = 'test'
    
          }
        }
      });
    
    
      new Vue({
        el: "#app",
        vuetify: new Vuetify(),
        components: {
          mainbox
        }
      });
    
    </script>
    
    
    <style scoped>
    
    .v-text-field--outlined fieldset {
        border: blue 2px solid;
    }
    
    </style>

another solution would be to use !important on your class, but personally I dont believe it’s an elegant solution

👤Guy Nachshon

Leave a comment