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:
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.
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/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.