Fix Dropdown menu in dark themes

[AnnMarieW]

The border on the dropdown menu in light themes looks fine but is too bright in dark themes. I haven't found the selectors to be able to update this yet, so if anyone can help, I'd appreciate it!

You can see a live demo at https://hellodash.pythonanywhere.com/theme_explorer in the "Bootstrap-themed Dash app example:

---

[keurfonluu]

That seems to work:

.Select-menu-outer {
    border-color: red !important;
}

[AnnMarieW]

Hey @keurfonluu

Your solution is getting me part way there - Thanks!! :pray:

I'm still having an issue though, maybe you (or some other kind soul) will be able to explain what's going on:

I can change the border color like you suggested, and this works with many colors, including red like your example. However, I would like the drop down menu box to be the same border as the input box, which is rgba(100, 100, 100, 0.4)

I tried the following, but it doesn't work. It looks the same as the image above, it's still too bright

.dbc .Select-menu-outer {
    border-color: rgba(100, 100, 100, 0.4) !important;   
}

But here's a weird thing: when I add the background-color like below, it works!! :confetti_ball: :champagne: :fireworks:

.dbc .Select-menu-outer {
    border-color: rgba(100, 100, 100, 0.4) !important;
    background-color: var(--bs-body-bg);
}

But not so fast.... now the hover effect doesn't work, and you can't see the option you are hovering over. :grimacing: :face_with_head_bandage: :cry:

Here are all the selectors I'm using for the dropdown and a MWE. Can you see anything that's obviously wrong?

And again, thanks so much for your first suggestion.

/* input box */
.dbc .Select-control {
  background-color: var(--bs-body-bg) !important;
  border: solid rgba(100, 100, 100, 0.4) 1px !important;
}

/* changes the text color of input box */
.dbc .Select-value-label {
  color: var(--bs-body-color) !important;
}

.dbc .Select input {
  color: var(--bs-body-color);
}

/* dropdown menu options */
.dbc .VirtualizedSelectOption {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* dropdown menu hover effect */
.dbc .VirtualizedSelectFocusedOption {
  background-color: rgba(100, 100, 100, 0.2);
  color: black;
}

/* border on focus - default is blue
 * shadow box around input box.  default is blue
 */
.dbc .is-focused:not(.is-open) > .Select-control {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}

/* primary  this colors the input box text and x  of multi */
.dbc .Select--multi .Select-value {
  color: var(--bs-body-color);
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  border-color: rgba(var(--bs-primary-rgb), 0.6) !important;
}

.dbc .Select-menu-outer {
    border-color: rgba(100, 100, 100, 0.4) !important;
    background-color: var(--bs-body-bg);
}

And here's an MWE:

from dash import Dash, dcc, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.CYBORG] )

app.layout = html.Div(
    [
        dcc.Dropdown(
            id="dropdown",
            options=[
                {"label": "New York City", "value": "NYC"},
                {"label": "Montréal", "value": "MTL"},
                {"label": "San Francisco", "value": "SF"},
            ],
            value="MTL",
        ),
    ], className="dbc m-4",
)

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

[keurfonluu]

Isn't the hover effect controlled by?

/* dropdown menu hover effect */
.dbc .VirtualizedSelectFocusedOption {
    background-color: blue;
    color: red;
}

Edit: here is a snapshot of the debugger when the dropdown menu is expanded, it gives an idea of all the classes involved in a Dash dropdown

[AnnMarieW]

Yes, I have it like this:

/* dropdown menu hover effect */
.dbc .VirtualizedSelectFocusedOption {
  background-color: rgba(100, 100, 100, 0.2);
  color: black;
}

But somehow the following overrides it. And I think I've tried every permeation of order and/or using !important. Can't get it to work yet.

.dbc .Select-menu-outer {
    border-color: rgba(100, 100, 100, 0.4) !important;
    background-color: var(--bs-body-bg);
}

[keurfonluu]

I understand, but rgba(100, 100, 100, 0.2) is transparent dark gray (over Select-menu-order dark background), so it seems to be working as intended.

The hover effect you had before the "fix" was a transparent dark gray over a white background, I just don't know which class this background color was inherited from.

[AnnMarieW]

Oh, right - I get it now. That gives me something to work with. Thanks so much for your help :slightly_smiling_face:

[AnnMarieW]

Fixed by using new Bootstrap variables available in Bootstrap 5.3.x

.Select-menu-outer {
  border: var(--bs-border-width) solid var(--bs-border-color);
}