jquery autocomplete color change

Question

I am using bootstrap for UI and jquery custome UI for autocomplete. When suggested items are listed, i would like to match bootstratp blue color instead of yellow. Where can I chnage the color and what is the correct hex ? Please see the attched image. Thanks!

Solution 1

.ui-state-hover {
    background: #428BCA!important;
}

Example:

http://jsfiddle.net/trevordowdle/DLLVw/104/

Solution 2

After a loot of tries, I found a working code for myself. After reading the entire jquery UI CSS file I found that #c77405 was the colour responsible for this orange effect. You can use notepad++ for finding all occurrences of this colour.you can copy and paste the following code in your file as internal CSS.

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #5b518b; /* any color you like */

}
.ui-widget-content .ui-state-active {
    color: #5b518b; /* any color you like */
}

Comments

[geedubb]

Why not use http://getbootstrap.com/2.3.2/javascript.html#typeahead as it's part of bootstrap?

[user3067524]

I love to d othat. Infact I tried. Please see my other post. I am very new to bootstrap and jquery. I sepnd significant amout of time to make jquery autocomeplet work with ajax call. I tried if i can get som ehelp to convert it to typehead but gave up. Pleas esee my othe rpost. If you can help on in, I teally want to use type head.stackoverflow.com/questions/20750535/converting-to-type‌​head. BTW, I am using bootstrap 3.0

[Trevor]

@user3067524 Please mark this answer as accepted if it answered your question or give feedback. Thanks

[Darky WC]

The second class helps me to style Jquery UI Autocomplete selection. Thanks.