Styling links in jQuery UI autocomplete results

Question

Я прочитал много вопросов о стилизации автозаполнения jQuery UI, однако у меня все еще есть проблема, которую я не могу решить. Я создаю пользовательский рендеринг, как это:

$('.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); 
}; 

Так что мои <li> элементов содержат ссылки.

Теперь я хочу, чтобы стиль выпадающего меню, и я использую следующие CSS (я преувеличил цвета для наглядности):

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

Однако ссылки не получают стиль. Что озадачивает меня больше всего то, что я вижу при проверке результата в отладчике Хрома:

Вы можете видеть, что вычисленная стиль для активного <a> элемента является синим цветом, однако сам элемент имеет белый фон. Что это за белая вещь, которую я должен стилизовать?

Я уже пробовал различные селекторы, такие как .ui-state-active, .ui-state-hover, ui-state-focus, ul.ui-autocomplete li a:hover и другие.

Примечание: правило border: none; от ul.ui-autocomplete li:hover a фактически применяется - без него стиль выглядит по-другому (имеет 1px черную рамку вокруг ссылки). Итак, единственная проблема - это фон.

Answer 1

Похоже, что ссылка в элементе списка имеет набор background-image. Это будет отменять любые цвета фона, которые вы используете.

Вы можете установить background-image: none для этой конкретной ссылке

Что-то вроде:

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

Пример ссылки с фоновым изображением и один без: https://jsfiddle.net/yuwhuwkz/1/