Dash Bootstrap Components - DropdownMenu Value

Dash Python
7

Below is some CSS that you can add to your app and it should do what you want, just make sure you wrap the dropdown with an element that has the “dash-bootstrap” class applied like this:

app.layout = html.Div([dcc.Dropdown(...)], className="dash-bootstrap")

I took the CSS from here and made a few modifications to make it look more like the DropdownMenu. With the below CSS + Darkly I get something that looks like this

image

but you can play around with the styles to achieve whatever look you like.

.dash-bootstrap .Select-control {
  height: calc(1.5em + 0.75rem + 2px);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  background-color: #222;
  background-clip: padding-box;
  border: 1px solid #444;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .dash-bootstrap .Select-control {
    transition: none;
  }
}

.dash-bootstrap .Select-control:hover {
  box-shadow: none;
}

.dash-bootstrap .is-open > .Select-control {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.dash-bootstrap .is-focused:not(.is-open) > .Select-control {
  border-color: #aaa;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(55, 90, 127, 0.25);
}

.dash-bootstrap .Select.is-disabled > .Select-control {
  background-color: #ebebeb;
}

.dash-bootstrap .Select--multi .Select-value {
  border-radius: 0.125rem;
  color: #eee;
  border-color: rgba(200, 200, 200, 0.25);
  background-color: rgba(55, 55, 55, 0.1);
}

.dash-bootstrap .Select--multi .Select-value-icon:hover {
    background-color: #333;
    color: #fff;
}

.dash-bootstrap .Select--multi .Select-value-icon {
  border-right-color: rgba(55, 55, 55, 0.25);
}

.dash-bootstrap .has-value.Select--single > .Select-control .Select-value .Select-value-label,
.dash-bootstrap .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
  color: #444;
}

.dash-bootstrap .Select-multi-value-wrapper {
  height: calc(1.5em + 0.75rem);
}

.dash-bootstrap .Select-placeholder {
  color: #999;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.dash-bootstrap .Select--single > .Select-control .Select-value,
.dash-bootstrap .Select-placeholder {
  line-height: calc(1.5em + 0.75rem);
}

.dash-bootstrap .Select-input {
  height: calc(1.5em + 0.75rem);
}

.dash-bootstrap .Select-menu-outer {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  background-color: #222;
  background-clip: padding-box;
  border: 1px solid #444;
  border-top-color: transparent;
  box-shadow: none;
  color: #fff;
}

.dash-bootstrap .VirtualizedSelectOption {
  height: calc(1.5em + 0.75rem) !important;
}

.dash-bootstrap .VirtualizedSelectFocusedOption {
  background-color: rgba(55, 90, 127, 0.1) !important;
}
3 Likes