Black Lives Matter. Please consider donating to Black Girls Code today.

Change textcolor for dropdown-menu

Hi there!

I am in the process of styling my dash-applications to fit my companies CI. So far my experience with dash is great and this posting documents my first real issue so far.

I can’t figure out, how to change the text-color for a dropdown-menu to white.

I have tried to set "color": "white", but all that does is to set the textcolor of the candidates in the dropdown to be of white textcolor. I wouldn’t bother if these would stay black with white background - i just care about the initial view of the dropdown when the page is loaded. So the “PCA” and “1” with red background in the following image:

Here is the code that’s used to produce the dropdown with the “PCA”-entry:

html.Div(id='div_dropdown', style=styles.div_dropdown, children=[
                             dcc.Dropdown(id='dropdown_type', style=styles.dropdown_type,
                                              {'label': 'PCA',
                                               'value': 'PCA'},
                                              {'label': 'T-SNE',
                                               'value': 'T-SNE'},
                                              {'label': 'Autoencoder',
                                               'value': 'VAE'}],

and here are the used styles:

div_dropdown = {
    "height": "100%",
    "width": "15%",
    "float": "left",
    "display": "flex",
    "align-items": "center",
    "justify-content": "center",

dropdown_type = {
    "background-color": "#aa2222",
    # "color": "white",
    # "color": "#ffffff",
    # "fontColor": "white",
    # "font-color": "white",
    "width": "155px",
    "font-family": "sans-serif",
    "font-size": "large",

Where the commented out portions are some of the things that i’ve tried out. These all produce the same result, which is shown in the image above.

What i’ve read and tried out so far:

Input styling (Fonts) (solution: set fontColor in parent Div)
How to colorize Dropdown field in Dash? (solution: delete browser cache)