How to colorize Dropdown field in Dash?

Dash Python
1

Hi,
Can I colorize a dropdown field (not the whole menu) in Dash ? What about the selected text only ?
Thanks!

2

dcc.Dropdown doesn’t include any attributes for customizing the style or the content of the options. The only way to customize the style of this dropdown and its options would be by extending an external stylesheet that would override the CSS of the options. You can see the default CSS stylesheet here: https://github.com/plotly/dash-core-components/blob/master/dash_core_components/react-virtualized%409.9.0.css and https://github.com/plotly/dash-core-components/blob/master/dash_core_components/react-virtualized-select%403.1.0.css

3

Deleted this post ok

4

I have added

.DateInput {
font-weight: 200;
font-size: 14px;
line-height: 12px;
color: #ffffff;
margin: 0;
padding: 8px;
background: rgba(0,0,0,0);
position: relative;
display: inline-block;
width: 130px;
vertical-align: middle;

}

To a working .css file that comes in last into my app.
Notice that I changed font-size and line-height.
I proved that these props do work when I mod them in the browser/inspect but when I run this, I am seeing the original css for that class like my css override didn’t happen.
Any ideas?

5

Stupid browser cache!
It works.

6

Hi Chris,

Looks like the links are down (or protected - https?).
I have a similar problem where a dropdown menu has inherit my CSS body font color (white) which makes it impossible to read and I can’t find the class name in default skeleton CSS example to modify dropdown/multi-select properties (background or font color). So an example could be useful. I can do it from python easily from using style, but I would like to have it in my CSS template.

P.S. It’s only while selecting from the dropdown/multi-select. I’ve managed once it is selected… I’m completely new to CSS, it may be an obvious question, but I can’t find any answer so far.

Cheers

7

Found test.css example from you guys with .Select *{ ... }. Good enough to get me started.
Does someone knows of a place to find default CSS classes if I would like to change background on selected values (light blue, etc.), or for other components (e.g. slider)
Cheers,

8

Hello @thoughtsociety, Steve,
could you please send me hint where to find the CSS styles for the DCC?
Sorry for the naive/perhaps stupid query.

Many thanks,
Vaclav

9

I think those are in a css file that Dash uses are here:

base_css = ‘https://codepen.io/chriddyp/pen/bWLwgP.css’

10

Hello Steven,
many thanks. However, I was searching for .DateInput you mention in the file and didn’t find it.
Does it mean you just edited and added the .DateInput into your Chris’s CSS file?

Cheers,
Vaclav

11

I am running into this issue as well. I can style the background color of the dropdown, but not the foreground color. I don’t see anything in the source css that could be relevant related to dropdown or select colors. Suggestions?

12 
.VirtualizedSelectFocusedOption {
    background-color: green;
    color: white;
}
.VirtualizedSelectOption {
    background-color: red;
    color: white;
}

Hope this could help! https://stackoverflow.com/questions/59221514/python-drop-down-change-content-color

2 Likes
13

Hi drew.yang,

This is great!
Just a question: when I apply in the CSS file one of them (.VirtualizedSelectOption or .VirtualizedSelectFocusedOption) it works Ok, but when I want to apply both together just ‘.VirtualizedSelectOption’ works, and all the elements are shown with the same style.
Thanks for your help!

14

Hi,
I found that the problem is related with the order, it must be the ‘.VirtualizedSelectFocusedOption’ first.

15

This works for me.

#react-select-2–value-item {
color: white;
}