[BUG] - Font color in Bordered select is always gray

[Rain-YuXia]

NextUI Version

2.4.6

Describe the bug

Just came to NextUI for a few days. I have a bordered select. I found out the font color is always gray no matter what color props

As you can see, it's still gray even I set the color="primary". It makes the font color inconsistent since the font color in Input is black while the font color in Select is gray

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

<Select
  name="role_id"
  label="Job Role"
  labelPlacement="outside"
  startContent={
      <UserCircleIcon className="w-4 h-4 text-default-400 pointer-events-none" />
  }
  variant="bordered"
  color='primary'
  placeholder="Select your role"
  onChange={(e) => setData('role_id', e.target.value)}
>
  {roles.map(role => (
      <SelectItem key={role}>
          {role}
      </SelectItem>
  ))}
</Select>

Expected behavior

The color should be consistent or is there any way to change the color in Select?

Screenshots or Videos

No response

Operating System Version

Mac

Browser

Chrome

[linear]

ENG-1279 [BUG] - Font color in Bordered select is always gray

[macci001]

Hi,
The color=primary will apply only to the label not the selected value and selectable values list in popover.

You can add the class: classNames: { "popoverContent": "text-primary", "value": "text-primary" }
Here, the styling in value applies to the selected value and styling in popoverContent is applied to selectable values.

• Adding the above class might help you get:
  
• If you like to have custom color for the selected value, you can add the classNames: { "popoverContent": "text-primary", "value": "text-[#99C7FB]" } class
  

[macci001]

@wingkwong Will it be helpful to edit the bordered variant for this?

[Rain-YuXia]

Hi, The color=primary will apply only to the label not the selected value and selectable values list in popover.

You can add the class: classNames: { "popoverContent": "text-primary", "value": "text-primary" } Here, the styling in value applies to the selected value and styling in popoverContent is applied to selectable values.

• Adding the above class might help you get:
  
• If you like to have custom color for the selected value, you can add the classNames: { "popoverContent": "text-primary", "value": "text-[#99C7FB]" } class
  

Hi

Thank you for your solution.

It changed the color of selected value as expected. But the cons is that the color of placeholder gets changed as well.

Because the placeholder is not a real placeholder prop in an input, but a span. So I have to do like this: classNames= {{ "value": data ? "text-black" : "text-gray-500" }} as my temporary solution.

But personally, I can't get the point of design in this way. If the Select has no border, the selected value color is the same as other components. Why the selected value will be changed when Select is bordered, making the color inconsistent with other components?

[macci001]

@Rain-YuXia
You can add this {"value: "group-data-[has-value=true]:text-default-foreground"} to avoid using the conditional. This will show text as gray when placeholder is shown and black when some value is selected.

• when placeholder
  
• when value is selected
  

[Rain-YuXia]

@macci001
working perfectly. Thanks

Is it an undocumented hidden feature? I can't find it anywhere in the documentation.

[macci001]

@macci001 working perfectly. Thanks

Is it an undocumented hidden feature? I can't find it anywhere in the documentation.

This is just a hack until this bug is fixed.