title: Styling links in jQuery UI autocomplete results
body: <p>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:</p>
  
  <pre><code>$('.license-input').autocomplete({
      source: "{{url(LaravelLocalization::getCurrentLocale().'/ajax/license')}}",
      minLength: 2,
      delay: 250
  }).autocomplete('instance')._renderItem = function( ul, item ) {
      return $('&lt;li&gt;')
              .append('&lt;a href="' + item.url + '"&gt;' + item.name + '&lt;/a&gt;')
              .appendTo(ul);
  };
  </code></pre>
  
  <p>So my <code>&lt;li&gt;</code> items contain links.</p>
  
  <p>Now I want to style the dropdown and I use the following CSS (I have exaggerated the colors for visibility):</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>However, the links does not get styled. What puzzles me the most is what I see when inspecting the result in Chrome's debugger:
  <a href="https://i.stack.imgur.com/qHAIp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qHAIp.png" alt="enter image description here"></a></p>
  
  <p>You can see that the computed style for the active <code>&lt;a&gt;</code> element is the blue color, however the item itself has white background. What is this white thing that I should style?</p>
  
  <p>I have already tried various selectors like <code>.ui-state-active</code>, <code>.ui-state-hover</code>, <code>ui-state-focus</code>, <code>ul.ui-autocomplete li a:hover</code> and others.</p>
  
  <p>Note: the <code>border: none;</code> rule from the <code>ul.ui-autocomplete li:hover a</code> actually gets applied - without it the style looks different (has 1px black border around the link). So the only problem is the background.</p>