How can I style the first and last hover li items created? On the CSS code it just shows #ui-active-menuitem, that means only one rule to style the hovers. This is bad to my design because I use rounded corners, and I want that the first li hover has also rounded top corners and that the last li hover has rounded bottom corners.
The only rule the CSS shows is:
#ui-active-menuitem{
background-color: #CCC
color: #F0F0F0;
z-index:-5;
}
I was looking in the code of jQueryUI Autocomplete and I found that it only implements one case of hover:
this.active = a.eq(0).children("a").addClass("ui-state-hover").attr("id", "ui-active-menuitem").end();
Now, because I can only us开发者_JS百科e one generic class for hover li items, it looks like this, with no rounded hover which looks odd on a 3px bottom rounded corner: http://i.stack.imgur.com/2EgsK.jpg
I made my own implementation separately in a static html page of the CSS where I use first-of-type and last-of-type to make the hovers rounded in the top and bottom corners, which looks like this: http://i.stack.imgur.com/bk6RA.jpg
How can I apply/implement first-of-type and last-of-type on #ui-active-menuitem with jQuery UI Autocomplete?
Thank you guys!
The anchor tag gets .ui-state-hover
and id="ui-active-menuitem"
but there is also the containing <li>
and <ul>
to consider. The structure is something like this (with only relevant details included):
<ul class="ui-autocomplete">
<li class="ui-menu-item">
<a>...</a>
</li>
<li class="ui-menu-item">
<a>...</a>
</li>
<li class="ui-menu-item">
<a class="ui-state-hover" id="ui-active-menuitem">...</a>
</li>
</ul>
So you can do something like this in your CSS:
ul.ui-autocomplete li.ui-menu-item:first-child a#ui-active-menuitem {
border-radius: 3px 3px 0 0;
}
ul.ui-autocomplete li.ui-menu-item:last-child a#ui-active-menuitem {
border-radius: 0 0 3px 3px;
}
to only adjust the corners on the first or last active item in an autocomplete list.
精彩评论