[bug]: Wrong selector for select component placeholder

[yudyananda]

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

• I've made research efforts and searched the documentation
• I've searched for existing issues

[erashu212]

@yudyananda Can you please share any codesandbox?

[servesh-chaturvedi]

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

[abeisleem]

@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

[yudyananda]

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