Chakra: Style placeholder of select
Is there a way to style the <Select>
more subtle if the placeholder option is selected?
3211 views
Is there a way to style the <Select>
more subtle if the placeholder option is selected?
3211 views
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?