Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Styling drop-down not possible › Reply To: Styling drop-down not possible
March 16, 2023 at 4:13 pm
#41809
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;
}