Reply To: need to view all css used by the plugin for easier custom styling

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