USelect with placeholder display options with missleading color

[KonradDRAST]

Environment

---

• Operating System: Windows_NT
• Node Version: v20.10.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Version

2.8

Reproduction

visible even on the docs page

Description

When there is no value set for select, the placeholder is displayed (if set). In such case, when options are displayed their labels are "muted" - looks like disabled ones.

Once any option is picked, their color change to "proper" one.

Additional context

No response

Logs

No response

[noook]

Can you still select those options ? I believe this is your system's behavior, it is probably consistent with any other regular select you could find.

The dropdown menu you see is not styled in anyway by Nuxt UI, it is plain HTML

[KonradDRAST]

Yes, I can select it, and no, it's not like this on default selects, that's why I've spotted it. It's caused by class text-gray-400 that is applied to "placeholder version", and is later changed to text-gray-900

So, it's styled by Nuxt UI.

[noxsii]

@KonradDRAST can u open a reproduction?

[KonradDRAST]

@KonradDRAST can u open a reproduction?

As mentioned in my issue - this happens even on official docs page: https://ui.nuxt.com/components/select#placeholder

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[farahats9]

I am having the same issue, if I add a placeholder the enabled options become light gray and the disabled options are darker, once I select an option it sometimes fixes the colors. so to reproduce try to add a few disabled and enabled options.