Chakra UI: Change option text color and option background in Select

user_11744875 0
Viewed 3527

I have a select dropdown using ChakraUI, it like:

<Select color={"white"} bg={"black"}>
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
</Select>

When I click to dropdown, the option has both textColor and bgColor is white. I want to change option appear that textColor is black and bgColor is white. I have set color, bgColor in option field but it not working

chakra-ui next.js reactjs
1 Answers

You will need to style the <option>s:

<Select bg="black" color="white">
  <option style={{ color: 'black' }} value="option1">
    Option1
  </option>
  <option style={{ color: 'black' }} value="option2">
    Option2
  </option>
</Select>;

Note that if you add a placeholder to <Select>, it will still be white on white when opened.

Another curious thing is that this problem does not happen in Safari, there the dropdown looks just like a standard OS menu.

user_95086350
Related