Inline css being applied but not css file

Dash Python
1

Greetings

I have the following dropdown:

dcc.Dropdown(id="year",
    className = "dd",
    options=[
            {'label': i, 'value': i } for i in list(range(1996, 2022))],
           multi=False,
          value = 2019,
style = {'width': "100px", 'marginRight': '50px'})

And I have a css file with the following stylling:

.dd option{
    background-color: green;
}

.dd{
    border-radius: 10px;
    padding: 2px;
    outline: None;
}

I am trying to change the color of the foreground of the dropdown (the inside area). If I use the inline styling 'backgroundColor': 'green', it works fine, but when adding this to the css file (under .dd or .dd option, it isnt applied. What am I doing wrong??

2

@Suva1 ,
I think the reason you are not getting the effect, is that there is not a component called “option.” The dropdown component, when it gets translated to html, uses a many different classes from the dash libraries. For example, the item you see initially, is a class “Select-control”, and the value is a class “Select-value”. And then within those there are span components and div components. Try the following css in your custom stylesheet, and see how it changes things:

.dash-dropdown .Select-control {
    background-color: green;
}

.dash-dropdown .Select-menu-outer div {
    background-color: lightgreen;
}

Hope that helps.
Kaz.

3

Hi @kazshak

The options you see is a prop of the dcc.Dropdown component in Dash. It influences the the options, in terms of the values it provides to callbacks and labels it shows for the user. It has nothing to do with the styling.

4

Hi,

@kazshak’s point is that your CSS selector is .dd option, which would target a <option> tag inside dcc.Dropdown. However this component does not have this internal structure in html (using option), therefore your selection is not working.

His suggestion should work because it uses the right classes in the internals of dcc.Dropdown (mostly divs and spans). Just note that his snippet targets all dcc.Dropdown components in your application, so you may want to target with the className instead… In other words, use .dd .Select-control instead of .dash-dropdown .Select-control and so on…