I can't change color of dropdown menu

Dash Python
1

I have Dash 1.1.1 and I am trying to change the color scheme to have a black background and while text. I’ve managed to get everything to work except for the Dropdown elements.

The initial look of Dropdowns is fine, except the color of the default values is too dark:

Screenshot%20from%202019-09-03%2011-46-02

However, if I select one of the dropdown menus, the backgrounds are white:

Screenshot%20from%202019-09-03%2011-50-12

How do I make the selected menus also have black background and white text?

Here is the beginning of my layout, which contains all of the Dropdowns:

app.layout = html.Div(style={‘backgroundColor’: ‘black’, ‘color’: ‘white’}, children=[
html.Label(‘Dropdowns’),
dcc.Dropdown(
id=‘universe’,
options=[{‘label’: i, ‘value’: i} for i in table_list],
value=table_list[-1],
style={‘backgroundColor’: ‘black’, ‘color’: ‘black’}
),
dcc.Dropdown(
id=‘ranking’,
options=[{‘label’: ‘All’, ‘value’: ‘All’}]+[{‘label’: i, ‘value’: i} for i in rankings],
value=‘All’, style={‘backgroundColor’: ‘black’, ‘color’: ‘black’}
),
dcc.Dropdown(
id=‘category’,
options=[{‘label’: ‘All’, ‘value’: ‘All’}]+[{‘label’: i, ‘value’: i} for i in factor_categories.keys()],
value=‘All’, style={‘backgroundColor’: ‘black’, ‘color’: ‘black’}
),
…

I’ve attempted to make changes to css stylesheets, but never see any of them show up, so I’m not sure I’m doing that correctly:

external_stylesheets = [‘dashboard_style.css’, ‘bootstrap.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)

I’ve also tried without any modified stylesheets and I still get the above problem.

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.

2

I have the same problem, but i think you may be interested in this topic :

3

Hi @kilobit,

Thanks, the post you quoted gets me part way where I need to be. I can now conclusively say that the stylesheets I have are being read in. Whether or not they are ignored (as per your answer) is a different question. I think next I need to identify what class I need to modify (such as .Select–multi, .Select-value, .VirtualizedSelectFocusedOption in the example style.css) to change the background color of the dropdowns from white to black.

Any ideas?

Since you have the same problem, have you made any progress?

1 Like
4

Was just about to make a post about this myself - did you manage to figure it out?

5

I’ve been experimenting with extending Bootstrap CSS to add consistent styling to Dash core components. You can check that out here. Like I say, it’s somewhat experimental, and there’s a couple of bootswatch themes that the support isn’t perfect for, but I think it’s working well enough at the moment that it will get you at least 90% of the way there if you’re using one of the dark Bootswatch themes for example and you want a dark Dropdown to match.

If you do try it out, I’m very happy for people to raise issues / pull requests where they encounter issues, so do let me know how you get on.

6

Hi @Sinsst, no, I haven’t had time to make any progress on it. @tcbegley 's post looks promising though.

7

Any updates on this?

I am having the same problem.

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

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

Implementing that in my .css file worked for me :slight_smile:

9

Hi,
I also have issues with asigning colors to dropdown.
I arrive at the conclusion that to manage the colors of the option list you can use:

.VirtualizedSelectOption {
    background-color: LightGreen;
    color: black;
}

.VirtualizedSelectFocusedOption {
    background-color: green;
    font-size: 18px;
    color: white;
}

And for manage the background color of the value use the option mentioned by Xela95,

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

But if I want to change the color of the value this option doesn’t work for me:

.Select-control {
  color: white;
}

What is the possible solution?
Thanks

2 Likes
10

Hi @Eduardo, I think you should use this one instead:

.Select-value-label {
color: green;
}