Change the placeholder's colour in a select component and its styling.

[NotNotRama]

I'm currently trying to change the colour of the placeholder in a select component.

export function SelectDemo() {
  return (
    <div className="flex flex-col flex-1">
      <label>Label</label>
      <Select>
        <SelectTrigger>
          <SelectValue placeholder="Select" className="placeholder:text-muted-foreground" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="blueberry">Blueberry</SelectItem>
            <SelectItem value="grapes">Grapes</SelectItem>
            <SelectItem value="pineapple">Pineapple</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  );
}

I'm currently a bit in the dark as I don't know where I should place the className that should change the colour (if it should be placed on SelectValue or in SelectTrigger). Tried in both places without much luck.

Also tried using data-[placeholder]: instead of just placeholder: but the problem persists.

Another issue I'm having with this component is that sometimes when I'm out of focus I'd get a gray line on the right of it

[JerzyJaneczek]

You can reference #147 for further details:

• Go to select.tsx file and in SelectPrimitive.Trigger do: data-[placeholder]:text-muted-foreground

[AlejandroYYWireless]

A true scholar

worth mentioning that it belongs not as an attribute but add it to the SelectPrimitive.Trigger classname