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 chan开发者_运维知识库ge the background color? (And, I am wondering why it's not taking the default settings. I downloaded the jQuery from JQueryUI website).
Thanks.
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.
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.
精彩评论