How to change color of selected dropdown values in Dash

Specific Domains Visualization
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