CSS wrong work with autocomplete widget.
Please see screen shot.

Comments

Category:task» bug

Yes, I found the same problem on this widget too.
tagging this to a bug.

Title:CSS and autocomplete widgetAutocomplete widget background is transparent
Version:7.x-2.2» 7.x-2.x-dev
Component:Other» Design
Assigned:Unassigned» Jeff Burnz

StatusFileSize
new10.6 KB

I just solved as followed

#autocomplete ul {
  background:#ffffff;
  color:#2e2e2e;
}
#autocomplete ul li { margin:0; }
#autocomplete ul li:hover { background:none; }
#autocomplete ul div {
  cursor:pointer;
  position:relative;
  display:block;
  width:100%;
  padding:3px;
}
#autocomplete ul div:hover {
  background:#779125;
  color:#ffffff;
}

The example is trivial, but works

how did you implement this? did you alter CSS directly, or did you use a module to alter CSS without touching core css in theme? i'm having the same issue with transparencies.

I added my own .css file to override the theme css .

was this fix moved into the recent 7x-2.2 release?

Not as yet, updates for Corolla are scheduled, I am working out a new schedule at the moment, will advise.

Status:Active» Fixed

Thanks adnasa, I implemented basically the same solution, but placed the colors in color.inc and used the text color (#2e2e2e) for the hover with #fff white text, so there is always enough contrast to read the list.

Pushed it to dev. Cheers.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Status:Closed (fixed)» Needs review

What about not hover, but active? After it was selected by arrow keyboard keys

Must be this rule I guess:

#autocomplete li.selected