shadcn-ui
[bug]: Wrong selector for select component placeholder
Describe the bug
Just found out that tailwind selector placeholder:... on trigger (Select component) won't have any effect. In my casedata-[placeholder] will solve the issue
Affected component/components
Select
How to reproduce
change the style of the trigger placeholder in the select component, and see if there is a change
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
WSL
Before submitting
- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues
The tailwind placeholder selector is not working for you as the styles will only affect an input/textarea element where placeholder is an attribute. On the select component it is used as a prop so it won't work. @yudyananda
@yudyananda is right. see documentation here: https://www.radix-ui.com/primitives/docs/components/select#with-a-placeholder
currently, the select component is styling the placeholder text with placeholder:text-muted-foreground and based on radix select component, it should be styled with data-[placeholder]:text-muted-foreground. the current placeholder:text-muted-foreground does nothing to the style.
applying the correct placeholder selection has impact on the color of the ChevronDown in making it also text-muted-foreground... to resolve this, it's should color should explicitly be styled with text-foreground
see the following differences:
with the current placeholder selector:
with the correct placeholder selector:
with the correct placeholder selector AND explicitly styling the color of the chevron:
Edit: there's currently an outstanding PR (#2558) for this
The tailwind placeholder selector is not working for you as the styles will only affect an input/textarea element where placeholder is an attribute. On the select component it is used as a prop so it won't work. @yudyananda
@servesh-chaturvedi Yes i'm on the same page with you about that, but just like @abeisleem said the current selector placeholder:... on the select component does nothing because the trigger it self is only a button who act as pseudo element for the hidden input
