This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Reply To: Styling drop-down not possible

#41809
Ernest MarcinkoErnest Marcinko
Keymaster

Okay!

Usually overriding with custom CSS is the best way to go, modifying the original CSS files is not going to help, as those are generated dynamically when you change the plugin options.

For taxonomy terms, you should try using the drop-down with search variation: https://i.imgur.com/WAv2VGU.png

That is a custom made script for the drop-downs, and it has a very similar layout for all devices.

Styling it is not easy, but possible via custom CSS:

/* The Container */
.asp_select2-selection,
span[class*=asp_select2-selection],
.asp_select2-search__field,
.asp_select2-search__field::placeholder {
    background: red !important;
    color: white !important;
}

/* The selection */
.asp_s span.asp_select2-container--flat ul li.asp_select2-selection__choice,
.asp_sb span.asp_select2-container--flat ul li.asp_select2-selection__choice {
    color: white;
    background-color: #ff7272 !important;
    border: 1px solid #ff7272 !important;
}

/* Drop down general */
span.asp_select2-container--open .asp_select2-dropdown--below,
span.asp_select2-container--open .asp_select2-dropdown--above {
    background: #9c6a6a;
    color:#fff;
}

/* Drop down selected values */
span.asp_select2-container--flat .asp_select2-results__option[aria-selected=true] {
    background: #b34949;
    color: #fff;
}

/* Drop down hovered selection */
span.asp_select2-container--flat .asp_select2-results__option--highlighted[aria-selected] {
    background: #dc3737 !important;
    color: #fff;
}