Styling drop-down not possible

[Uli Niklaus]

Hello!

Unfortunally the support Ticket-System doesn\’t work, so i write you here..

I bought the \”Ajax Search Pro\” and have following problem:

How I can change the background of the dropdown menu in the \”Ajax search pro\”? There is one point in the settings for the Dropdown, but it is ultimately ignored by the mobile phone (iphone) and desktop browser (Mac – firefox/Chrome). Tried to help with CSS but no matter how, this slightly transparent blur background always remains.
Is it a bug? Or is the Dropdown style provided from a local browser/computer?

Divi theme is in use.

The page is currently in maintenance mode, so no link, but i can provide Screenshots.

I hope you can help me!
Thanks!

Kind regards
Uli Niklaus

[Ernest Marcinko]

Hi,

Thank you very much for the details!

Well, it highly depends on the browser and device. Some devices allow more customization, so less, some does not allow anything. Apple devices are especially very problematic, they rarely respect any customization whatsoever.
Usually Windows/Linux Chrome is the most customizable one, and Safari is the least allowing (in my experience).

Are these post type, taxonomy or custom field filters? I’m asking because there is a different drop-down layout, which may work better cross devices and has more room for styling.

[Uli Niklaus]

Thanks for replying!

These are taxonomy..

I tried to find it in the plug-in css files, but had no luck..

[Ernest Marcinko]

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

[Uli Niklaus]

Thanks! I Think that could work.
BUT unfortunally, when i make the setting for the dropdown with search, i’m not able to use the dropdown menu.
I click and it dissapears at the same moment.. normal dropdown works.
please check the video.. any idea?

[Ernest Marcinko]

It looks like either a 3rd party script conflict for the mouse hover events or some sort of a misalignment via styling.
I will have to take a look at the issue directly to be able to tell.

Can you please share a URL where I can see this? I don’t think I need server access for now.

[Author]

Posts