[Resolved] Shop — Product Categories Search Form at Sidebar Widget

[Juned]

Hi,

Pls guide me how to change the color (of – Drop form, Text, Focus, Background) at Shop Page — Product Categories Search Form at Sidebar Widget.

It is not linked with Regular Forms.

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Juned]

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.

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Juned]

🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts