顺风CSS更改占位符选项的文本颜色

我有一个项目，我需要在表单中使用select。所有其他类型的输入都有一个浅灰色的占位符。输入中键入的文本为黑色

表单的select输入需要具有相同的样式。默认值/占位符值需要显示为深灰色，用户可以选择的实际值需要显示为黑色。但是，当我尝试为第一个（默认/占位符）选项指定其他颜色时，它不会使用此颜色。它实际上一直使用select元素中指定的颜色

以下是元素内部的选择：

 <select
        type="text"
        name="carType"
        id="carType"
        v-model="carType"
        placeholder="Car Type"
        class="my-2 px-4 py-3 border rounded-lg text-black-primary focus:outline-none text-sm"
      >
        <option class="text-gray-400" value="" disabled selected>Select your option</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
</select>

选择您的选项
沃尔沃汽车
萨博
梅赛德斯
奥迪

使用普通CSS也可能是一个棘手的问题，但有一个解决办法。如果是必填字段，可以将

required

属性添加到

select

元素中，并使用样式将其设置为占位符。其思想是，如果将第一个选项用作占位符，则默认情况下，

将选中该选项

，并且

将其禁用

，该表单字段无效，因此可以将其设置为这样的样式

在下面的代码段中，我只添加了一个

required

属性，并直接为

：invalid

类设置样式，这实际上不是Tailwind-y，但它可以工作：

@导入url（“https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css”）；
：无效{
颜色：rgba（156、163、175、1）；
}

选择您的选项
沃尔沃汽车
萨博
梅赛德斯
奥迪

这是一个很棒的答案！你的自定义插件工作得很好。谢谢：）