Change textcolor for dropdown-menu

Dash Python
1

Hi there!

I am in the process of styling my dash-applications to fit my companies CI. So far my experience with dash is great and this posting documents my first real issue so far.

I can’t figure out, how to change the text-color for a dropdown-menu to white.

I have tried to set "color": "white", but all that does is to set the textcolor of the candidates in the dropdown to be of white textcolor. I wouldn’t bother if these would stay black with white background - i just care about the initial view of the dropdown when the page is loaded. So the “PCA” and “1” with red background in the following image:

grafik
grafik802×261 8.89 KB

Here is the code that’s used to produce the dropdown with the “PCA”-entry:

html.Div(id='div_dropdown', style=styles.div_dropdown, children=[
                             dcc.Dropdown(id='dropdown_type', style=styles.dropdown_type,
                                          options=[
                                              {'label': 'PCA',
                                               'value': 'PCA'},
                                              {'label': 'T-SNE',
                                               'value': 'T-SNE'},
                                              {'label': 'Autoencoder',
                                               'value': 'VAE'}],
                                          value='PCA',
                                          searchable=False)
                         ])

and here are the used styles:

div_dropdown = {
    "height": "100%",
    "width": "15%",
    "float": "left",
    "display": "flex",
    "align-items": "center",
    "justify-content": "center",
}

dropdown_type = {
    "background-color": "#aa2222",
    # "color": "white",
    # "color": "#ffffff",
    # "fontColor": "white",
    # "font-color": "white",
    "width": "155px",
    "font-family": "sans-serif",
    "font-size": "large",
}

Where the commented out portions are some of the things that i’ve tried out. These all produce the same result, which is shown in the image above.

What i’ve read and tried out so far:

Input styling (Fonts) (solution: set fontColor in parent Div)
How to colorize Dropdown field in Dash? - #6 by FrankB (solution: delete browser cache)

1 Like
2

hi, did you figure it out?

3

Hi @tanya

Here are a few css selectors I’ve found useful for the styling the dropdowns. Try adding this to the css file in the assets folder. (More info on how to do that here. ) This example styles the dropdown so it works well for dark themes in Bootstrap.





/* input box */
.Select-control {
    background-color: black;
}


/* changes the text color of input box */
.Select-value-label {
    color: white !important;
}

.Select--single > .Select-control .Select-value, .Select-placeholder {
    border: 1px solid grey;
    border-radius: 4px;
}


/* dropdown menu options */
.VirtualizedSelectOption {
    background-color: black;
    color: white;
 }


/* dropdown menu hover effect */
.VirtualizedSelectFocusedOption {
    background-color: black;
    opacity: .7;
}


/* border on focus - default is blue
 * shadow box around input box.  default is blue
 */
.is-focused:not(.is-open) > .Select-control {
  border-color: var(--primary); 
  box-shadow: none;
}




/* this colors the input box text and x  of multi dropdown*/
.Select--multi .Select-value {
  color: white;
}
6 Likes
4

Thanks, this is what I needed

1 Like
5

What if you have multiple dropdowns on your app, and you need to apply a unique style to each?

For example, I have several dropdowns and have created a unique CSS class for each dropdown. I would like to change the text input font color for one of my dropdowns to blue, and the other to red.

I’ve tried the following, but it only applies either a blue or red font color to ALL dropdowns.

.Dropdown-1, .Select-value-label {
    color: blue !important;
}


.Dropdown-2, .Select-value-label {
    color: red !important;
}

Any ideas?!

6

Hi @dani_m and welcome to the Dash community :slightly_smiling_face:

Please see the solution in this post:

1 Like