[Dash Mantine Component] How to change background color of a selected item of dmc.Select component?

Dash Python
1

Hey Dashers,

As the title says all; I am looking for suggestions on how to change background color of the selected item in the dropdown list of dmc.Select component.

More specifically I want to change the blue background of the selected item in the below image:

Screenshot 2023-11-23 at 14.35.30

Since I am not confident with my CSS skills, II have experimented with API styles of dmc.Select with no avail.

I am almost sure it must be something like the one below, but I guess I need to find different attribute than :focus to specify an element is selected.

.mantine-Select-item:focus{
    background-color: red !important;
}

Cheers!

2

Hey, this seems to work for me:

  .mantine-12zgr9[data-selected]{
    background-color: #005800;
  }
3

Heyyo,

It did work for me as well thank you! However, I need to take care of hover background as well:

.mantine-Select-item[data-selected]{
    background-color: rgb(55, 58, 64);
}	
.mantine-Select-item[data-selected]:hover{
    background-color: rgb(55, 58, 64);
}
1 Like
4

styles={{
item: {
‘&[data-selected]’: {
backgroundColor:
‘red’,
color: ‘red’,
fontWeight: 600,
},
},
value: {
display: ‘none’,
},
}}