Change Font Color for Dropdowns

Dash Python
1

What if you have multiple dropdowns on your app, and you need to apply a unique style to each?

For example, I have several dropdowns and have created a unique CSS class for each dropdown. I would like to change the text input font color for one of my dropdowns to blue, and the other to red.

I’ve tried the following, but it only applies either a blue or red font color to ALL dropdowns.

.Dropdown-1, .Select-value-label {
    color: blue !important;
}


.Dropdown-2, .Select-value-label {
    color: red !important;
}

Any ideas?!

2

hi @dani_m ,
just give your dropdown a classname, then you can find any specific one.

3

@stu yep – I’ve given my dropdowns classname’s (in my python file). In my CSS file, I reference these classnames.

In the CSS above, I have the following classnames: .Dropdown-1 and .Dropdown-2.

Let me know if that doesn’t look right to you though!

4

@AnnMarieW any ideas?

5

Try taking the comma out, so it’s like this:

.Dropdown-1 .Select-value-label {
    color: blue !important;
}
6

@AnnMarieW That didn’t work unfortunately! That gives the same result as described above (i.e., applies the font color to all dropdowns, and not just that classes dropdown).

7

Hello @dani_m,

Welcome to the community!

Could you please provide an MRE:

This will help us see what exactly is going on.

8

Hi @dani_m

It worked for me with no commas between the two selectors.

Here’s the .css in the assets folder


.Dropdown-1 .Select-value-label {
    color: blue !important;
}


.Dropdown-2 .Select-value-label {
    color: red !important;
}

Here’s a minimal example from the dash example index:

image
image779×452 44.8 KB 

from dash import Dash, dcc, html, Input, Output, no_update
import plotly.express as px
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

df = px.data.gapminder().query("year == 2007")

dropdown_country_a = dcc.Dropdown(
    id="dropdown-a",
    options=df.country,
    value="Turkey",
    className="Dropdown-1"
)

dropdown_country_b = dcc.Dropdown(id="dropdown-b", className="Dropdown-2")

info_card = dbc.Card(dbc.CardBody(html.P("Choose two countries and drag to rotate.")))

app.layout = dbc.Container(
    [
        html.H2("Country distances on map"),
        html.Hr(),
        dbc.Row(
            [
                dbc.Col([dropdown_country_a, dropdown_country_b], lg=6, sm=12),
                dbc.Col(info_card, lg=6, sm=12),
            ]
        ),
        dbc.Row(
            [
                dbc.Col(
                    dcc.Graph(id="locations-graph"), lg=6, sm=12
                ),
                dbc.Col(dcc.Graph(id="graph"), lg=6, sm=12),
            ]
        ),
    ]
)

# Callback for dropdown-b
@app.callback(
    Output("dropdown-b", "options"),
    Output("dropdown-b", "value"),
    Input("dropdown-a", "value"),
    Input("dropdown-b", "options"),
)
def set_dropdown_b_options(dropdown_a_value, dropdown_b_options):
    return (
        df[df.country != dropdown_a_value].country,
        "Canada" if dropdown_b_options is None else no_update,
    )


# Callback for line_geo graph
@app.callback(
    Output("graph", "figure"),
    Output("locations-graph", "figure"),
    Input("dropdown-a", "value"),
    Input("dropdown-b", "value"),
)
def make_line_geo_graph(country_a, country_b):
    dff = df[df.country.isin([country_a, country_b])]

    fig = px.line_geo(
        dff,
        locations="iso_alpha",
        projection="orthographic",
    )

    fig_locations = px.line_geo(
        dff, locations="iso_alpha", projection="orthographic", fitbounds="locations"
    )

    fig.update_traces(
        line_width=3,
        line_color="red",
    )

    fig_locations.update_traces(
        line_width=3,
        line_color="red",
    )

    return fig, fig_locations


if __name__ == "__main__":
    app.run_server(debug=True)
2 Likes