如何在Vuetify JS中修改禁用字段（含下拉、复选框）的默认颜色？

Vuetify对不同组件的禁用状态有独立的样式规则，只靠:disabled选择器没法覆盖所有情况，需要针对组件类型或者用Vuetify的CSS变量来全局定制，下面是两种可行的方法：

方法1：使用深度选择器精准覆盖组件样式 #

如果需要针对特定组件（文本框、下拉框、复选框）分别定制，推荐用Vue的深度选择器（::v-deep，Vue 3中也可以用:deep()）来穿透Vuetify的组件样式：

1.1 覆盖文本框/下拉框的禁用样式 #

在你的全局样式文件（比如styles/global.css）或者组件的<style>标签中添加：

/* 覆盖所有输入类组件（文本框、下拉框）的禁用状态 */
::v-deep .v-input--disabled {
  /* 修改文本颜色 */
  .v-input__control {
    color: #000000 !important;
    /* 针对下拉框的选中文本 */
    .v-select__selections {
      color: #000000 !important;
    }
    /* 针对文本框的输入区域 */
    .v-text-field__slot {
      color: #000000 !important;
    }
  }
  /* 可选：修改禁用状态的背景色 */
  .v-input__slot {
    background-color: #e8e8e8 !important;
  }
}

1.2 覆盖复选框的禁用样式 #

同样添加以下样式来处理复选框的禁用状态：

/* 覆盖复选框的禁用状态 */
::v-deep .v-checkbox--disabled {
  /* 修改复选框图标的颜色 */
  .v-icon {
    color: #000000 !important;
  }
  /* 修改复选框标签的颜色 */
  .v-label {
    color: #000000 !important;
  }
}

方法2：使用Vuetify全局CSS变量（更优雅） #

Vuetify的很多样式都是通过CSS变量定义的，你可以直接在全局样式中重写这些变量，实现全局统一的禁用样式：

针对Vuetify 3： #

:root {
  /* 输入组件禁用时的文本颜色 */
  --v-input-disabled-text: #000000;
  /* 输入组件禁用时的背景色 */
  --v-input-disabled-bg: #e8e8e8;
  /* 复选框禁用时的图标颜色 */
  --v-checkbox-disabled-color: #000000;
  /* 复选框禁用时的标签颜色 */
  --v-checkbox-disabled-label-text: #000000;
}

针对Vuetify 2： #

:root {
  /* 输入组件禁用文本颜色 */
  --v-input-disabled-text-color: #000000;
  /* 输入组件禁用背景色 */
  --v-input-disabled-bg: #e8e8e8;
  /* 复选框禁用图标颜色 */
  --v-checkbox-disabled-color: #000000;
}

注意：不同Vuetify版本的CSS变量名可能略有差异，建议查看对应版本的官方文档确认变量名称。

验证效果 #

添加完样式后，刷新页面测试：

• 禁用的文本框：文字颜色变为黑色
• 禁用的下拉框：选中项文字颜色变为黑色
• 禁用的复选框：图标和标签文字颜色变为黑色

内容的提问来源于stack exchange，提问作者Veer3383