Twitter bootstrap 使用vuejs更改禁用下拉文本的颜色

我要寻找的是，当我选择一个项目时，我想在下拉列表中禁用该选项。下面的代码工作正常，但禁用文本的颜色太浅。我想使它更暗，甚至使用一个引导颜色类（初级，次级）

有没有办法在vuejs代码中更改禁用文本的颜色，或者我是否已在CSS中进行了更改

HTML/vuejs:

<option v-for="chores in chores.Data" :key="chores.ChoreId" v-bind:value="chores.ChoreId" :disabled="dailyChoreCheck(chores.ChoreId)">{{chores.ChoreName}}</option>

  dailyChoreCheck: function(selectedChoreId){
        var vm = this;
        if(vm.customChores.length > 0){
            return vm.customChores.filter(function(item) {
                return  item.choreId == selectedChoreId && item.dayName == "Daily";
            }).length > 0;
        }
  }

---

需要css来设置禁用文本的样式。您可以通过以下方式设置禁用选项元素的样式：

option:disabled {
   color: #abcdef;
}

或者使用Vue将自定义类添加到这些禁用的选项中，然后在这些选项上使用css

---

对我来说，前一种方法更简单。

需要css来设置禁用文本的样式。您可以通过以下方式设置禁用选项元素的样式：

option:disabled {
   color: #abcdef;
}

或者使用Vue将自定义类添加到这些禁用的选项中，然后在这些选项上使用css

---

对我来说，前一种方法更简单。

您是否对特定组件使用Vue SFC？如果是这样的话，就用

中的限定范围的css来实现这一点。@Ruchernchung-不，我不是。你能提供这个链接吗？我从来没有听说过。看看这个：您是否在为特定组件使用Vue SFC？如果是这样的话，就用

中的限定范围的css来实现这一点。@Ruchernchung-不，我不是。你能提供这个链接吗？我从没听说过。看看这个：这是正确的。理想的方法是将其放入特定组件的作用域样式中。@MarkFeng-动态类的东西看起来很酷。我可以捕获一个状态为禁用的属性（将其设置为我的检查），但我似乎无法切换禁用选项的类。只有那些不可分割的。你知道如何只针对禁用的选项吗？@webdad3在这里查看我的代码：。据我所知，css不适用于本机select元素的选项，但可以添加动态类。您可以检查web Inspector中的选项元素，并查看禁用的选项是否可以作为目标。这是正确的。理想的方法是将其放入特定组件的作用域样式中。@MarkFeng-动态类的东西看起来很酷。我可以捕获一个状态为禁用的属性（将其设置为我的检查），但我似乎无法切换禁用选项的类。只有那些不可分割的。你知道如何只针对禁用的选项吗？@webdad3在这里查看我的代码：。据我所知，css不适用于本机select元素的选项，但可以添加动态类。您可以检查web Inspector中的选项元素，并查看禁用的选项是否可以作为目标。