Juris Juris - 8 months ago 51
CSS Question

Styling links in jQuery UI autocomplete results

I have read through many questions about styling of jQuery UI autocomplete however I still have a problem that I can not solve. I am creating custom rendering like this:

$('.license-input').autocomplete({
source: "{{url(LaravelLocalization::getCurrentLocale().'/ajax/license')}}",
minLength: 2,
delay: 250
}).autocomplete('instance')._renderItem = function( ul, item ) {
return $('<li>')
.append('<a href="' + item.url + '">' + item.name + '</a>')
.appendTo(ul);
};


So my
<li>
items contain links.

Now I want to style the dropdown and I use the following CSS (I have exaggerated the colors for visibility):

ul.ui-autocomplete li
{
border:none;
background-color:#f505f5;
padding:10px 16px;
font-size:12px;
outline:0;
}

ul.ui-autocomplete li:hover
{
background-color:#05e5e5;
}

ul.ui-autocomplete li a
{
border:none;
background-color: #f505f5;
}

ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
}


However, the links does not get styled. What puzzles me the most is what I see when inspecting the result in Chrome's debugger:
enter image description here

You can see that the computed style for the active
<a>
element is the blue color, however the item itself has white background. What is this white thing that I should style?

I have already tried various selectors like
.ui-state-active
,
.ui-state-hover
,
ui-state-focus
,
ul.ui-autocomplete li a:hover
and others.

Note: the
border: none;
rule from the
ul.ui-autocomplete li:hover a
actually gets applied - without it the style looks different (has 1px black border around the link). So the only problem is the background.

Answer Source

Looks like the link in the list item has a background-image set. This will override any background colors you use.

You can set the background-image: none for that particular link

Something like:

ul.ui-autocomplete li:hover a
{
    border:none;
    background-color: #05e5e5;
    background-image: none;
}

Example of link with background image and one without: https://jsfiddle.net/yuwhuwkz/1/