how can I change the css of a selected <Option/> of <Select/>?

Question

I am using React.js, and ant-design components.

I have a <Select/> component with a few <Option/> inside of it, now I know that on each selected option has this automatic hue added to it, but I want to change it do a different one, and also to change the background etc, but only if an option has been selected.

is there a way to do that?

(Select, Option Components - https://ant.design/components/select/ )

Answer 1

<select>
  <option selected="">1</option>
  <option>2</option>
</select>
<style>
  option[selected]{
    background: #f00;
  }
</style>

This is the right CSS for this but I think it doesn't work on every browser. Even on Firefox it works only if you hover over the expanded options. Changing CSS styles of inputs was always pretty bad and weird. That's why there are libraries for that.

Answer 2

first of all sorry for my bad english, i dont know it is the best answer but when i want to change an element style i use its class and give that class a css. for selectbox you can use ant-select-selector in your css file:

.ant-select-selector{background-color:green}

if you want to check class for diffrent things you can check the element in dev tools.If you look at this img when i select to selectbox div i can see its own class and i can change its background-color.