How to change colour of text in Select option onChange

Question

I am using Chakra UI to create a web app. I have this Select component:

<Select
  value={summarisationType}
  onChange={(e) => setSummarisationType(e.target.value)}
  color={placeholdertext}>
  <option value="" disabled>Summarisation Type</option>
  <option value="single_article">Single Article</option>
  <option value="macroeconomic_report">Macroeconomic Report</option>
</Select>

There are a few things I am trying to implement:

1. I would like the colour of the text in the main Select box (to be clear, I'm talking about the one with the dropdown arrow) to change from {placeholdertext} to {text} onChange without interfering with the script that is already there. For example, I would like the text in the box to change from grey to white when the desired option is selected.
2. I would like the placeholder text "Summarisation Type" to not show as an option in my dropdown. I've gotten around the issue by setting the option to disabled so you can't select it and mess up the rest of the code but there must be a more elegant way of having proper placeholder text in a Select component?

I've tried implementing concepts from these posts:

How to pass parameters on onChange of html select

Change Text Color of Selected Option in a Select Box

But I'm way too much of a novice to get these to work!

Thanks,

Carolina

Answer 1

Figured it out!

<Select
  value={summarisationType}
  onChange={(e) => setSummarisationType(e.target.value)}
  color={summarisationType == "" ? placeholdertext : text}>
  <option value="" disabled hidden>Summarisation Type</option>
  <option value="single_article">Single Article</option>
  <option value="macroeconomic_report">Macroeconomic Report</option>
</Select>

With these constants defined above in the function:

const [summarisationType, setSummarisationType] = useState("");
const text = useColorModeValue("gray.800", "white");
const placeholdertext = useColorModeValue("gray.500", "gray.400");

The color parameter changes depending on whether summarisationType is blank, i.e., matches the value I set in the first option, or not. The Summarisation Type option is also disabled and hidden so it can't be selected and is not displayed as a dropdown option.