Proposal: Style empty option placeholders in select fields consistently with input placeholders

[adwiv]

Issue

It is quite common to use an option with empty value as a placeholder in select fields. Currently, there is no visual difference between a selected value and an empty value placeholder in select fields. This creates inconsistency when select fields appear alongside other input fields in forms.

For example, here is a screenshot using the Valentine theme:

As we can see, the color of Select Gender is darker than that of Enter Email or Enter Phone

Proposal

We should style the empty placeholder text of select fields to match the styling of input placeholders for better visual consistency across form elements.

Solution

I've experimented with a modification to the stylesheet based on inputs from Stack Overflow and the DaisyUI codebase:

.select select {
    color: color-mix(in oklch, currentColor 50%, #0000);
}
.select select:has(option:checked:not([value])),
.select select:has(option:checked:not([value=""])) {
    color: currentColor;
}

You can see this in action here: https://play.tailwindcss.com/rLiTmSorLg

Remaining Challenge

One issue that persists is that the dropdown icon color remains the same as the text color. I haven't been able to address this yet and would appreciate suggestions.

Question

What do you think? Should we style empty placeholder text in select fields to match input placeholders for better consistency?