CODEWITHSUNDEEP
jquery
Tony
Tony

Reputation: 3409

JQuery background color

I am using jQuery Autocomplete on my ASP.net page. I am not sure how to change the backgroud color of the AutoComplete. Right now, it displays the list with "Clear" background.

Where can i change the background color? (And, I am wondering why it's not taking the default settings. I downloaded the jQuery from JQueryUI website).

Thanks.

Upvotes: 0

Views: 3223

Answers (2)

Dragos
Dragos

Reputation: 11

If you use an jquery autocomplete with a css search this:

.ui-state-hover, 
.ui-widget-content 
.ui-state-hover, 
.ui-widget-header, 
.ui-state-hover, 
.ui-state-focus, 
.ui-widget-content, 
.ui-state-focus, 
.ui-widget-header, 
.ui-state-focus 
     { 
       border: 1px solid #999999/*{borderColorHover}*/; 
       background: #dadada /*{bgColorHover}*/ url(images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/;   
       font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; 
     }

.ui-state-hover a, 
.ui-state-hover a:hover, 
.ui-state-hover a:link, 
.ui-state-hover a:visited 
     { 
       color: #212121/*{fcHover}*/; 
       text-decoration: none; 
     }

Change #dadada with your desired color.

Upvotes: 1

Phil.Wheeler
Phil.Wheeler

Reputation: 16858

The jQuery Autocomplete control uses a series of Themeroller styles for presentation:

  • ul: ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all
  • li: ui-menu-item
  • a: ui-corner-all

You could either add a custom style for ui-autocomplete li or ui-autocomplete a. There doesn't appear to be a way to define your own purpose-built styles as part of the control.

The likely best way to define the background colour is by overriding the .ui-menu .ui-menu-item style.

Upvotes: 2

Related Questions