jquery autocomplete dropdown is transparent

Question

I am trying to use jquery autocomplete on one of my textfields, and everything seems to be ok except for the fact that the dropdown is transparent for some reason.

I am linking both jquery-ui.js and jquery-ui.css, both are version 1.11.4. It seems to be loading the values ok, the transparency of the dropdown seems to be the only problem. My js code is as simple as it can get:

$( "#edit_account" ).autocomplete({
source: dataArray
});

here is a screenshot of what it looks like:

I have looked around and have not found the same issue.

Thank you.

Answer 1

The issue with the above case was just the transparent background.

The list that is appended to the DOM is

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-autocomplete-custom"></ul>

with the CSS

.ui-autocomplete-custom {
    background: #87ceeb;
    z-index: 2;
}

This would add a color to the list, and z-index would ensure the element lies above another element.

Answer 2

.ui-autocomplete { background-color: inherit; }

It works for me.

Answer 3

I found this as I had an issue but it was specifically on an IOS mobile device

Whilst none of the above worked the following (a hybrid of the above did)

I think this will be useful should the above not work.

.ui-autocomplete {
    background-color: #fff;
}