CSS for Dash: Color of Selected Value changes when hovering over other options

Dash Python
1

Hi!

I am editing the style of dropdown values in my Dash App via .css file in the assets folder.

This code changes the color (text and it’s background) of the selected value from dropdown.

.VirtualizedSelectFocusedOption {
    background-color: rgb(17, 95, 132);
    color: rgb(218, 126, 40);
}

This code changes the color (text and it’s background) of values where mouse is hovering.

.VirtualizedSelectOption:hover  {
  background-color: rgb(99, 99, 245);
}

The problem is that I cannot keep both effets.
When I hover over a dropdown value (without clicking on it) the color of the hover value is changing as intended. But the colors of the previously selected value are disappearing.

.VirtualizedSelectOption:hover  {
  background-color: rgb(99, 99, 245);
}

.VirtualizedSelectFocusedOption {
    background-color: rgb(17, 95, 132);
    color: rgb(218, 126, 40);
}

How can I keep both effects?

Exampe of the dropdown code:

from dash import Dash, html, dcc

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
                dcc.Dropdown(
                    ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                    "December",
                    id="month-dropdown"
                ))
    ],
    style={"margin": 20},
)


if __name__ == "__main__":
    app.run(debug=True)
2

Anyone ? :slightly_smiling_face:

3

Hello @mrel,

On your css properties, follow the colors by !important this wills override any other setting, including inline styling.

This might be the issue you are encountering.

1 Like
4

Hi, @jinnyzor ,

I added !important as you suggested, but it didn’t change anything. When I am hovering over “not selected” options, the background color of the selected option is disappearing.

/* changes the background color of the text where mouse is hovering */

.VirtualizedSelectOption:hover  {
  background-color: rgb(99, 99, 245);
}

/* changes the color of the selected dropdown option */

.VirtualizedSelectFocusedOption {
    background-color: rgb(17, 95, 132) !important;
    color: rgb(218, 126, 40);
}
5

Hi @AnnMarieW ,

Maybe you could help here?
I found those selectors in your reply under this post.

6

Hi @mrel

Try this:

.VirtualizedSelectFocusedOption, .VirtualizedSelectSelectedOption {
    background-color: rgb(17, 95, 132);
    color: rgb(218, 126, 40);
}
1 Like
7

Worked perfectly.
Thank you very much, @AnnMarieW , and Happy New Year!

1 Like