Hi,
The best way to tackle custom styling is using the browser developer tools generally as there is a lot of items in there, the list would be thousands of lines long. However if you need help with something specific, then let me know, I can help with that.
Here is an example of customizing all the styles in the single/multiselect drop-downs:
/* ============================================= */
/* AJAX SEARCH PRO - TAXONOMY SELECT DROPDOWN */
/* Generic styling for all asp_select2 dropdowns */
/* ============================================= */
div.ajaxsearchpro.searchsettings fieldset {
/* 1. Main wrapper around the select */
.asp_select_label.asp_select_single {
margin-bottom: 15px;
}
/* 2. The visible closed dropdown box */
.asp_select2-selection.asp_select2-selection--single {
height: 48px;
background: #ffffff;
border: 2px solid #e0e0e0;
border-radius: 8px;
transition: all 0.25s ease;
}
/* 3. Hover effect on the closed box */
.asp_select2-selection.asp_select2-selection--single:hover {
border-color: #bbbbbb;
}
/* 4. Focused / opened state of the closed box */
.asp_select2-container--focus .asp_select2-selection--single {
border-color: #0066ff;
box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15);
}
/* 5. Selected text inside the closed box */
.asp_select2-selection__rendered {
color: #222222;
font-size: 15px;
font-weight: 500;
line-height: 46px;
padding-left: 16px;
}
/* 6. Dropdown arrow (closed state) */
.asp_select2-selection__arrow {
right: 12px;
}
}
/* ============================================= */
/* OPENED DROPDOWN PANEL STYLES */
/* ============================================= */
span.asp_select2-container {
/* 7. The opened dropdown container */
.asp_select2-dropdown {
border: 1px solid #96aff2;
background-color: #c9dfff !important;
border-radius: 8px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
margin-top: 4px;
z-index: 9999; /* Ensure it appears above other elements */
}
/* 8. Search input inside the opened dropdown (if enabled) */
.asp_select2-search--dropdown .asp_select2-search__field {
padding: 10px 12px;
border-bottom: 1px solid #eee !important;
font-size: 15px;
}
/* 9. Results container */
.asp_select2-results {
max-height: 300px !important; /* Adjust scrollable area height if needed */
}
/* 10. List of options */
.asp_select2-results__options {
padding: 6px 0 !important;
}
/* 11. Individual option items */
.asp_select2-results__option {
padding: 10px 16px !important;
font-size: 15px !important;
color: #333333 !important;
background-color: #c9dfff !important;
}
/* 12. Hover and highlighted (keyboard navigation) state */
.asp_select2-results__option:hover,
.asp_select2-results__option--highlighted[aria-selected] {
color: #f0f5ff !important;
background: #206bdc !important;
}
/* 13. "Any ..." / default option styling */
.asp_select2-results__option[data-asp_select2-id*="--1"],
.asp_option_cat[value="-1"] {
font-weight: bold !important;
color: #fefefe !important;
background-color: #206bdc !important;
}
/* 14. Taxonomy category options (level 0) */
.asp_option_cat.asp_option_cat_level-0 {
font-weight: 500 !important;
}
/* Optional: Child levels (if your taxonomy has hierarchy) */
.asp_option_cat_level-1 {
padding-left: 28px !important;
}
}
/* ============================================= */
/* MULTI SELECT STYLES */
/* ============================================= */
.asp_select2-container--flat .asp_select2-selection--multiple {
.asp_select2-selection.asp_select2-selection--multiple {
background: #ffffff;
border: 2px solid #e0e0e0;
border-radius: 8px;
transition: all 0.25s ease;
}
.asp_select2-selection.asp_select2-selection--multiple:hover {
border-color: #bbbbbb;
}
.asp_select2-container--focus .asp_select2-selection--multiple {
border-color: #0066ff !important;
box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.15);
}
/* Selected choice tags (e.g. "Spanish") */
.asp_select2-selection__choice {
background-color: #206bdc !important;
background: #206bdc !important;
border: 1px solid #206bdc !important;
color: white !importan;
border-radius: 6px;
padding: 4px 10px 4px 12px;
margin: 4px 4px 4px 0;
font-size: 14px;
font-weight: 500;
}
/* Remove button (×) on each tag */
.asp_select2-selection__choice__remove {
color: #ef4444;
margin-right: 6px;
font-size: 16px;
font-weight: bold;
opacity: 0.8;
}
.asp_select2-selection__choice__remove:hover {
color: #dc2626;
opacity: 1;
}
/* Inline search field inside multi-select */
.asp_select2-search--inline .asp_select2-search__field {
height: 32px;
margin: 4px 0;
padding: 0 8px;
font-size: 15px;
border: none;
box-shadow: none;
}
}