Change textcolor for dropdown-menu

Dash Python
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