Change style in dash DataTable drop down


is it possible to change the style inside a dropdown of a DataTable? I want a dark theme layout but if i change the backgroundcolor of the Table to dark and the font color to white, this does not apply to the dropdown. The dropdown background is white and the font is still dark

    'vary': {
        'options': [
            {'label': str(i), 'value': str(i)}
            for i in params['vary'].unique()
    , "clearable" : False } }        

I’m not sure if you’re referring to the cell where the dropdown box is or the dropdown list.
If it is the former, you may consider modifying the style_data or style_data_conditional property.
Otherwise, I currently can only think of adding some CSS like this below.

.dash-table-container.Select-menu-outer {background:black;}

I’ll keep an eye out for a better way for you.


Refer to

The font in the cell with the dropdown has another color than the rest of the cells in the table. I can pick between two values: True and False and one of them is default and set before using the dropdown. Before using the dropdown and after using it the font is still black. But the other thing (changing the dropdown list itself) would be also cool. I am relatively new to Python/Plotly, where can i change style_data or style_data_conditional for the cells and where can i change
.dash-table-container.Select-menu-outer {background:black;}
Thank you Sir!


And note Ann’s post I attached to my last reply.

unfortunately this does not work for the font in the cell, to be able to understand the problem I post the code and a picture to it


columns= [],             
data= [],
style_cell={"color" : colors["text"], "backgroundColor" : colors["background"]},  #dropdowns sind Trotzdem weis...  

"color" : colors["text"],
'backgroundColor': colors["table_background"],
'fontWeight': 'bold',
"textAlign" : "left"},

        'if': {'column_id': "vary"},
        'textAlign': 'center',
        "color": "white",
        "backgroundColor" : "black"

    'color': 'white',
    'backgroundColor': 'black'


        "selector": ".dash-table-container .Select-menu-outer",
        "rule": "background: black",
        "rule": "color white"        



My app works on Azure, so i cant go in any css folders


                                 ".dash-spreadsheet-container .Select-value-label",
                                 "rule": "color: white"

Thank you man!
Is there also a solution like that for the text in dropdowns?

Just use the browser inspector to find the corresponding selector.
Try it.

I now have everything as I want it. thank you for your time man really I appreciate it.

1 Like