Styling the placeholder option in a select

[stephenhenckaerts]

I have a project where I need to use a select inside a form. All other type of inputs have a placeholder with a light gray color. The text typed inside the inputs is black.

The select input of the form needs to have the same styling. The default/placeholder value needs to be shown in a dark gray and the real values that the user can select need to be shown in black. But when I try to specify a different color for the first(default/placeholder) option it doesn't use this color. It actually keeps on using the color specified in the select element.

Here is the select inside the element:

<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>

[rohitnishad613]

any solution?

[Nwachukwupgate]

You can style placeholders in tailwind css using placeholder:text-slate-400

[clarkewing]

In Tailwind v4 (but this should also work for v3), you can do the following:

<select class="has-[option.placeholder:checked]:text-gray-400">
    <option value="" disabled selected class="placeholder">Foobar</option>
</select>

If you don't want to set a .placeholder class on the placeholder <option>, you can do the following, but keep in mind this is less targeted and would also affect any other disabled options which may be programmatically selected.

<select class="has-[option:disabled:checked]:text-gray-400">
    <option value="" disabled selected>Foobar</option>
</select>