How to change color of selected dropdown values in Dash

Specific Domains Visualization
1

By default, the values selected from a Dash dropdown are displayed in blue text, with blue background. Is there a way to modify these colors? I found: Multivalue dropdown selected values color - #3 by Cloemdz - Dash Python - Plotly Community Forum
I made an assets folder inside my src and put the .css file, but it didn’t work.

2

Yes, it is definitely possible to change the color of selected dropdown values in a dropdown in Dash.

For example, take the following app.jl and assets/style.css.

# app.jl
using Dash, DashHtmlComponents, DashCoreComponents

options = ["option 1", "option 2"]

app = dash()

app.layout = html_div() do
    dcc_dropdown(
        className="custom-dropdown",
        multi=true,
        options = [
            (label = i, value = i) for i in options
        ],
    )
end

run_server(app, "0.0.0.0", debug=true)


/*assets/style.css*/

.Select--multi .Select-value {
    background-color: green;
    border-color: #e3a700;
    color: orange;
}

With the following folder setup, this should work:

src
├── app.jl
├── assets
│   ├── style.css
1 Like