Hi everyone,
I was wandering if there is any way to change the color of the selected values of a multivalue dropdown in Dash, by default they appear blue (see picture) and I would like to make them orange, is it possible?
I think that I need to change the CSS style but I don’t know exactly what to do…
Thanks in advance!
As you suspected, you can do this with a bit of custom CSS. It’s helpful to wrap the dropdowns you want to modify in an element with a particular className or id (in this example I chose className=“custom-dropdown”). This is so that your CSS selectors are more specific than the ones that come with dash-core-components so will consistently take precedence.
Here’s a minimal example
# app.py
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div(
dcc.Dropdown(
options=[
{"label": "Option 1", "value": 1},
{"label": "Option 2", "value": 2},
],
multi=True,
),
style={"padding": 20},
className="custom-dropdown",
)
if __name__ == "__main__":
app.run_server(debug=True)
/* assets/style.css */
.custom-dropdown .Select--multi .Select-value {
background-color: #fcba03;
border-color: #e3a700;
color: #fff;
}
Which looks like this (the colors I chose are pretty nasty, you should change them 
)
Awesome that’s exactly what I wanted!
Thank you 
Hi, I was playing around with my drop-down and I was actually wandering how did you found out that
.Select–multi .Select-value {}
was the option that I needed to change? Is there some sort of documentation with more of those options somewhere perhaps? For example how could you find out which option needs to be changed to change the contour of the drop-down box (in your picture it is blue for example)?
Thanks again!
No documentation afaik, I used the inspector in the browser (in Chrome you click View > Developer > Inspect elements) and some patience to figure out the HTML structure and which classes were applied then overrode them with some experimentation.
To answer your specific question you could add this to your stylesheet
.is-focused:not(.is-open) > .Select-control {
border-color: darkorange;
box-shadow: 0 0 0 3px #fcba0366;
}
Wow I really thought that there was some kind of documentation out there… Well at least I know now ! Thanks again for you help 
building on the answer to style backgrounds:
.Select-control, .Select div, .is-open>.Select-control{
color: white;
border-color: #e3a700;
border: 0 none transparent;
background-color: #787878;
}
.Select--multi .Select-value {
background-color: #fcba03;
border-color: #e3a700;
color: #fff;
}
Hi @tcbegley, is there a way to change the color of the vertical border line to the right of the “x”? When I update border-color, it looks like it works on the outer borders only.
Hi @nlyle
This selector styles the x icon:
.Select--multi .Select-value-icon {
border-right: 1px solid yellow;
}
@AnnMarieW for the win! Thanks.
@nlyle Hmm that looks odd - there might be some other css interfering?
Try this simple MWE:
import dash
import dash_html_components as html
import dash_core_components as dcc
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Dropdown(
id='demo-dropdown',
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montreal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value=['NYC', 'MTL'],
multi=True
)
])
if __name__ == '__main__':
app.run_server(debug=True)
Then put this in the .css file in the assets folder:
.Select--multi .Select-value-icon {
border-right: 10px solid yellow;
}
This is really ugly - but I made this yellow and 10px wide just to make in visible. It should look like this:
I feel like we’re close. I’m trying to give that vertical line the same light gray as the rest of my values so that it blends in and the line disappears. It looks like there’s .Select-value and .Select-value-icon. Here’s what I have now:
.Select--multi .Select-value .Select-value-icon {
background-color: #F0F0F0;
border-right: #CCCCCC;
border-color: #CCCCCC;
color: #212529;
}
The above gives me this:
If I adjust, I almost get there but the line is still blue-ish and visable:
.Select--multi .Select-value {
background-color: #F0F0F0;
border-color: #CCCCCC;
border-right: #CCCCCC;
color: #212529;
}
If you want to combine them see W3 schools: To style several elements with the same style, separate each element name with a comma
.Select--multi .Select-value, .Select--multi .Select-value-icon {
background-color: #F0F0F0;
border-color: #CCCCCC;
color: #212529;
}
Or more verbosely:
.Select--multi .Select-value {
background-color: #F0F0F0;
border-color: #CCCCCC;
color: #212529;
}
.Select--multi .Select-value-icon {
border-right: 1px solid #CCCCCC;
}
This worked. Thanks!
Hello,
I have a multivalue dropdown I’m using to select which data to plot on a line graph.
In the graph, each line is plotted in a different color.
Do you have any suggestions on how to make these two match:
Code for the dropdown:
html.Div(
[
dbc.Label("Select cells"),
dcc.Dropdown(
id="currentCell-variable",
options=[
{"label": col, "value": col} for col in df.currentCell.unique()
],
value=[0],
multi=True,
clearable=False
),
]
)
Code for the plot:
px.line(
df2d,
title="Voltage Measurement Accuracy (mV) vs Time",
x='currentTime',
y='accuracy_VC',
color='currentCell',
template=template,
labels={
"currentTime": "Time",
"accuracy_VC": "VC Accuracy (mV)"
}
)
Thanks,
7achef