Replies: 3 comments 7 replies
-
Hi @ImSolitude! Currently it's not possible to change the placeholder color separately from the other options' colors. I'll put this as an enhancement task and let you know when it's ready to be used. P.S. For styling the other properties, remember that the Select component is a multipart component, so if you want to override the default style you'd have to style the const Select = {
parts: ["field", "icon"],
baseStyle: {
field: {
color: "red.400"
},
icon: {
width: "2rem",
fontSize: "3rem"
}
}
}
const theme = extendTheme({
components: {
Select,
}
}); And here's a CodeSandbox link if you want to see the changes: https://codesandbox.io/s/hidden-smoke-6s7of?file=/src/theme.ts |
Beta Was this translation helpful? Give feedback.
-
Placeholders are now considered a bad UX practice. As soon as you start typing, you lose the information that was "important". This is very bad for users and forces them to do all kind of mental gymnastics to work with placeholders. Instead, it's recommended to show instructions on top (better accessibility), under the input or within a popover that doesn't automatically close if clicked. This allows the user to access the information even after having typed some data in the input. The advantages of proceeding this way are even more obvious when using a screen reader. In any case, if you really want to see how to change all placeholders colors, you should extend the global styles, there's an entry for that there. See the documentation: https://chakra-ui.com/docs/features/global-styles#default-styles |
Beta Was this translation helpful? Give feedback.
-
I am also waiting for this feature. As a workaround, I use Select as Controlled and specify color only when value is empty. const [value, setValue] = useState("")
// ...
<Select
placeholder="Please Select."
value={value}
onChange={(e) => setValue(e.target.value)}
{...(value === "" && {color: "gray"})}
>
<option value="1">option 1</option>
<option value="2">option 2</option>
</Select> It works for me, however it is somewhat messy. |
Beta Was this translation helpful? Give feedback.
-
First of all, For
<Select/>
It just doesn't make sense to have the placeholder color as the option color by default. bad UX. not sure why Chakra do it tho.If you try to add a placeholder to Select.
<Select placeholder="placeholder" />
Chakra adds this placeholder as first option with no value, now that's fine but how can I change the color of that placeholder? It doesn't make sense to have the same color as other options.I tried adding this to every single element
_placeholder={{ color: "red" }}
. even tho it's not ideal but still didn't work :D I even tried to select the first option using css and with!important
and still didn't work.I tried to customize the Select on chakra theme but no luck.
Beta Was this translation helpful? Give feedback.
All reactions