代码之家 › 专栏 › 技术社区 › code-8

如何覆盖Vuetify的禁用输入的边框颜色?

vuetify.js vuejs2 vue.js css javascript

code-8 · 技术社区 · 4 年前

这不是一个常见的情况,我想提前提到这一点。我需要覆盖vuetify的禁用输入字段的边框颜色。

我试过了

<v-text-field class="type-input" dense outlined v-model="type" label="Type" disabled></v-text-field>

请检查我的小提琴

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

>>> .type-input {
    border: blue 2px solid;
}

</style>

我不能让它工作。

0 回复 | 直到 4 年前

Guy Nachshon 4 年前

编辑

像 igor 已经在下面提到,您应该使用 .type-input.v-input--is-disabled fieldset 作为最具体的CSS选择器。

为了解决这个问题,你需要赢得“特殊性战争”。所以如果你要 .v-text-field--outlined fieldset 作为css选择器,它应该可以工作。

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

另一个解决方案是使用 !important 关于你的课,但就我个人而言,我不认为这是一个优雅的解决方案