Chakra: Style placeholder of select
Is there a way to style the <Select> more subtle if the placeholder option is selected?
3236 views
1 Answer available
You can use the sx props to override the color on condition.
export const MySelect = ({ children, ...selectProps }: SelectProps) => {
return (
<Select {...selectProps}
sx={{
"&": {
color: selectProps.value === "" ? "gray.300" : "current",
},
"& option[value='']": { color: "gray.300" }, // placeholder *option* should be subtle (firefox)
"& :not(option[value=''])": { color: "gray.800" }, // all other *options* should be default text color
}}
>
{children}
</Select>
);
};PS: In case you want to make sure that the underlying chakra <Select> can't be imported see in your project 👉 How can I prevent import of specific component of a library?