14

The goal is to create a JQuery autocomplete element whose list items have a blue background when they're hovered over or focused via the keyboard. The Facebook search box pulls this off nicely.

Each <li> element contains custom HTML wrapped in an <a>. Each of those <a> tags belongs to the class sbiAnchor. Generating the blue background on hover can be done successfully using the following CSS:

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover{
    background: blue;
}

But how does one apply that same blue background when the user keys up/down the autocomplete list. Changing the CSS code to the following does NOT work:

.ui-autocomplete a.ui-corner-all.sbiAnchor:hover, .ui-autocomplete .ui-state-focus a.ui-corner-all.sbiAnchor{
    background: blue;
}

What's the correct approach here? Keep in mind that this blue background effect should only apply to one specific autocomplete on my page (several of them exist). That's why I'm using sbiAnchor to differentiate its items from those of the other autocomplete elements. The other autocompletes should retain their default behavior so the CSS selectors shouldn't be too broad.

10 Answers 10

24

This work quite easy

body .ui-autocomplete {
  /* font-family to all */
}

body .ui-autocomplete .ui-menu-item .ui-corner-all {
   /* all <a> */
}

body .ui-autocomplete .ui-menu-item .ui-state-focus {
   /* selected <a> */
}
1
  • 5
    body .ui-autocomplete .ui-menu-item.ui-state-focus { /* selected <a> */ } There is a space between the last two classes when there shouldn't be
    – Adrian
    Jun 10, 2015 at 2:14
13

I've changed the color by:

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
}
1
  • 2
    That's the respective style in jquery-ui.css and with that the only appropriate answer. All the other answers have side effects.
    – Anja
    May 2, 2017 at 14:47
12

the css of hover become form this css class enter image description here

you can override it . for example:

.ui-state-focus {
background: none !important;
background-color: blue !important;
border: none !important;}
1
  • 1
    Heads up: overriding this class doesn't work without the !important flag for me
    – ABabin
    May 19, 2017 at 6:46
7

This changed the hover color for me.

.ui-menu-item .ui-menu-item-wrapper:hover
{
    border: none !important;
    background-color: #your-color;
}
0
4

I used above answers and tweaked little bit to work for my scenario (Hovering styling for JQuery autocomplete items). Hopefully this helps someone.

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #6693bc !important;
    font-weight: bold !important;
    color: #ffffff !important;
} 
1

Input fields rather than anchor tags hold focus. This should work.

.ui-autocomplete-input:focus, .ui-autocomplete a.ui-corner-all.sbiAnchor:hover {
    background: blue;
}
1

here is the correct answer: just change the "grey" by the color you want

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: none!important;
	background: grey;
	font-weight: normal;
	color: #ffffff;
}

3
  • Don't you think "here is the correct answer" is a tad arrogant? Certainly when this question already has a much upvoted answer, while yours unnecessarily repeats .ui-state-active and ui-button:active, also potentially affecting more than only the autocomplete elements mentioned in the question...
    – trincot
    Feb 21, 2018 at 14:54
  • Well i'm sorry if you took it that way, I didn't mean to be arrogant... in fact, I tried the upvoted answers but they didn't work for me, so I posted quickly the code that worked for me without thinking about the comment.
    – Wail
    Feb 21, 2018 at 15:55
  • Thank you. For me it was the only answer that worked. Nov 19, 2019 at 2:29
1

Use .ui-menu-item and ui-menu-item-wrapper.ui-state-active:

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  background: #f5f5f5 !important; 
  border: solid 1px transparent; 
}
0

Took a while to figure it out but the correct CSS code is:

.ui-menu .ui-menu-item a.sbiAnchor.ui-state-hover{
    background: blue;
}

This kills two birds with one stone, providing a blue background for both hover and selection via up/down keystrokes. The jQuery autocomplete element apparently treats the up/down keystrokes as a "hover" action, not a selection or focus.

0

Such an old topic, but the solutions above haven't worked for me. If I would have gone straight forward, I would have been much faster in finding a solution:

Overwrite in your custom stylesheet the following style of jquery-ui.css

.ui-autocomplete {
            border-radius: 0.25rem;
            background-color: #eceff1;
            padding: 0 0.6rem;
            font-family: 'ptmono';
        .ui-menu-item {
            border: 1px solid #eceff1;
            border-radius: 0.25rem;
            .ui-state-active,
    .ui-widget-content .ui-state-active,
    .ui-widget-header .ui-state-active,
    a.ui-button:active,
    .ui-button:active,
    .ui-button.ui-state-active:hover {
            background-color: #eceff1;
            border-color: #eceff1;
            color: #0d47a1;
            }
        }
    }

Instead of background: none !important, you can set the background in .ui-menu-item and in the active class. Additionally instead of writing border: none !important you overwrite in both classes the border color with the background color, what prevents a change of the height and with that a wobble effect.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.