Dash : how change color of dropdown menu backround and text

Man Fan 0
Viewed 63

I have Dash app and I am trying to change the color of my dropdown list to have a black background and white text in "Bold arial". Here is the part of code with the dropdown parameters :

dcc.Dropdown(
        id='langue_dropdown',
        options=[{'label': i, 'value': i}
                 for i in langues],
        value='fr',
        placeholder="langue"),
        style={'font-family': 'arial', "font-size": "1.2em",
               'marginBottom': 10, 'marginTop': 2, 'text-align': 'center'})

enter image description here

When I change my code to get a black backround, code :

dcc.Dropdown(
        id='langue_dropdown',
        options=[{'label': i, 'value': i}
                 for i in langues],
        value='fr',
        placeholder="langue"),
        style={'font-family': 'arial', "font-size": "1.2em",
               'marginBottom': 10, 'marginTop': 2, 'text-align': 'center',"background-color":"#151515", "color": "white"})

I don't get the expected result, the backround of list menu not change to black ? enter image description here

I’m new to Dash and plotly and don’t have much experience with css stylesheets, so please let me know if there is basic information that I haven’t provided.

Thanks.

plotly-dash css python
1 Answers

You can do this by adding a style.css file in your assets folder with the following classes:

.Select-control {
    background-color: rgb(25, 25, 25) !important;
    color:white;
  }
  
.Select-menu-outer {
    background-color: rgb(25, 25, 25);
    color: white;
}

.Select-value-label {
    color: white !important;
}

The above classes will change all the dropdowns in your application, but if you want to do something special that will be to a specific dropdown/element, you can use the id to specify in what element you need to apply your CSS class.

Below is a second example with the same classes I provided above, but with the id in the start of the class:

#langue_dropdown .Select-control {
    background-color: red !important;
    color:white;
  }
  
#langue_dropdown .Select-menu-outer {
    background-color: rgb(25, 25, 25);
    color: white;
}

/* changes the text color of input box */
#langue_dropdown .Select-value-label {
    color: rgb(37, 224, 37) !important;
}

Below is a working example showing how it works in practice:

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)
app.layout = html.Div([
    dcc.Dropdown(
        id='langue_dropdown',
        options=[{'label': i, 'value': i}
                 for i in ["en", "pt", "fr","jp"]],
        value='fr',
        placeholder="langue"),
    dcc.Dropdown(
        id='langue_dropdown2',
        options=[{'label': i, 'value': i}
                 for i in ["en", "pt", "fr","jp"]],
        value='fr',
        placeholder="langue"),
    html.Div(id='dd-output-container')
])


@app.callback(
    Output('dd-output-container', 'children'),
    Input('langue_dropdown', 'value')
)
def update_output(value):
    return f'You have selected {value}'


if __name__ == '__main__':
    app.run_server(debug=True)

and in CSS file assets/style.css

.Select-control {
    background-color: rgb(25, 25, 25) !important;
    color:white;
}  

.Select-value-label {
    color: white !important;
}

.Select-menu-outer {
    background-color: rgb(25, 25, 25);
    color: white;
}    

#langue_dropdown .Select-value-label {
    color: rgb(37, 224, 37) !important;
}    

#langue_dropdown .Select-control {
    background-color: red !important;
    color:white;
  }  
  
#langue_dropdown .Select-menu-outer {
    background-color: rgb(25, 25, 25);
    color: white;
}

If it solves your problem, please set it as the correct answer!

Otherwise, let me know if something is not clear yet.

Regards, Leonardo

Leonardo Ferreira0
Related