Shop -- Product Categories Search Form at Sidebar Widget

Hi there,

try this CSS:

/* Static color */
.select2-container--default .select2-results__option {
    background-color: #000;
    color: #fff;
}

/* Selected color */
.select2-container--default .select2-results__option[aria-selected="true"], 
.select2-container--default .select2-results__option[data-selected="true"] {
    background-color: #00f !important; 
    color: #000 !important;
}

/* Hover-focus color */
.select2-container--default .select2-results__option--highlighted[aria-selected="false"], 
.select2-container--default .select2-results__option--highlighted[data-selected="false"] {
    background-color: #f00 !important;
    color: #fff !important;
}

Thanks for the kind support.

The colors displaying are other than our theme color. We are using: #414a4c #54cdf1 #B3DC6C

If possible for you, kindly change these color codes to your above coding. If possible, please make the appearance as per primary menu/sub-menu type color combination to your coding.

I tried it, but not succeed.

Try:

/* Static color */
.select2-container--default .select2-results__option {
    background-color: #414a4c;
    color: #fff;
}

/* Selected color */
.select2-container--default .select2-results__option[aria-selected="true"], 
.select2-container--default .select2-results__option[data-selected="true"] {
    background-color: #b3dc6c !important; 
    color: #fff !important;
}

/* Hover-focus color */
.select2-container--default .select2-results__option--highlighted[aria-selected="false"], 
.select2-container--default .select2-results__option--highlighted[data-selected="false"] {
    background-color: ##54cdf1 !important;
    color: #fff !important;
}

:)

You're welcome