vue.js scss スタイル適応されない

Question

セレクトボックスの初期値である食べ物を選択の文字だけ#c7ced7色にしたいのですがうまくスタイルが適応されません。
わかる人がいましたら教えてください。
よろしくお願いします

    <p class="create_text">
      <select v-model="selected" @change="onChange()">
       <option value="" disabled selected style="display:none;"
          >食べ物を選択</option
        >
        <option v-for="food in foods" :value="food"
          >{{food.name }}
        </option>
      </select>
    </p>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Food from '@/food.json'
import {Food } from '@/domain/Food'

@Component
export default class SelectBox extends Vue {
  selected: string = ''
  foods: Food[] = []

  mounted() {
    this.setFood()
  }

  setLocation() {
    this.foods=Food
  }

  onChange() {
    this.$emit('changeFood', this.selected)
  }
}
</script>

<style lang="scss" scoped>
.create {
  padding: 16px;
    &_text {
      width: 100%;
      box-sizing: border-box;
      background: white;
　　　 &-inline {
        width: 150px;
      }
  }
}
select {
  width: 100%;
  background: url(../selectbox.svg) no-repeat;
 option:first {
    color: #c7ced7;
  }
}

Answer 1

<option>への色指定は、FirefoxではできますがChromeなどではできなかった気がします。

以下のサイトも、Firefoxでは文字色が変わっていますが、Chromeでは変化がないです。
https://www.tagindex.com/stylesheet/form/color.html

Answer 2

select {
  width: 100%;
  background: url(../selectbox.svg) no-repeat;
  option:first-of-type {
    color: #c7ced7;
  }
}

MDN :first-of-type

Comments

[cuku]

回答ありがとうございます。
変わりませんでした