How to stylize the box of a dropdown dcc, e.g., change background color?

Hi,

I am trying to change the white background of a dcc dropdown as the theme of the dash is black. Is there a way to do so from the style of the dropdown itself or from an external css?
i sued the following commands in a css, however, non of them changes the background color.
Also, is there a place where one can see all the options available for the style command of dash dcc’s? The only thing dash dcc page say is that the style command can be used to customize the dcc, but doesn’t list those options.

Any help is appreciated.
Thanks

.Select_box {
background-color: rgb(18, 13, 13) !important;
border-color: transparent !important;
border: 0 !important;

}

.VirtualizedSelectOption {
background-color: rgb(255, 255, 255);
color: #020201;
border-color: transparent !important;
border: 0 !important;
}

.VirtualizedSelectFocusedOption {
background-color: #CFFF00;
font-size: 18px;
color: rgb(13, 11, 11);
}

.Select-value-label {
color: #070802;
}

HI @tararu,

You could take a look at the css @AnnMarieW created for the dash bootstrap components, the ones for the dccDropdown() are right on top.

https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.2/dbc.css

1 Like

This works great. Thanks a lot.

2 Likes