Ask Question

Chakra: Style placeholder of select

Is there a way to style the <Select> more subtle if the placeholder option is selected?

chakraselect

594 views

AuthorΒ΄s AnkiCodes image

AnkiCodes

Last edited on

1 Answer available

Best answer

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?