如何仅更改默认 select 选项的颜色而不更改 Vue 中的其他选项？

Question

我正在尝试为默认选择的选项“请 Select 组合”和其他组合选项“A”、“B”、“C”、D 应用不同的颜色（新颜色） " 应该是黑色。

我只希望禁用的默认选项为绿色，其他所有选项均为黑色。

我们如何做到这一点？我一直在尝试使用条件类但它适用于所有选项，而不仅仅是第一个默认选项。

  <select
   v-model="comboSet"
   class="combo-padding"
   :class="{ 'new-color': comboSet !== null }"
  >
 <option value="" selected disabled hidden style="color: green"> 
   Please pick a combo
 </option>
 <option
           v-for="option in comboOptions"
           placeholder="Please Select a Combo"
           :value="option"
           :key="option"
           >
          {{ option }}
  </option>
</select>

 data () {
   comboOptions = ["A", "B", "C", D"] 
}

.new-color {
  color: green !important;
}

感谢您的帮助！

Answer 1

请记住 select 样式选项是有限的，您可以将类应用于选项元素。条件样式可以像这样应用：

<option
    v-for="(i, index) in items"
    :class="{ steely: styleMe == 1, purple: styleMe != 1 }"
    :key="index">
      {{ i }}
  </option>

模板是：

<template>
  <div>
    <h1>Select example</h1>
    <select
      :class="{ 'new-color': comboSet == 'Default option' }"
      v-model="comboSet">
      <option selected disabled class="new-color">Default option</option>
      <option
        v-for="(i, index) in items"
        :class="{ steely: styleMe == 1, purple: styleMe != 1 }"
        :key="index">
          {{ i }}
      </option>
    </select>
    <button @click.prevent="styleMe = !styleMe">Change</button>
  </div>
</template>

数据如下：

data() {
  return {
    items: ["Option One", "Option Two", "Option Three"],
    styleMe: false,
    comboSet: "Default option",
  }
}

样式如下：

.new-color {
  color: green;
}

.steely {
  color: steelblue;
}

.purple {
  color: purple;
}

我在这里用条件类创建了一个更完整的例子：code sandbox select example VueJs

希望这是有道理的并能回答问题。

如何仅更改默认 select 选项的颜色而不更改 Vue 中的其他选项？

How to change color of default select option only and not other options in Vue?

select

colors

vue.js

dropdown

vuejs2