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


adnasa’s picture

Category:task» bug

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

Jeff Burnz’s picture

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

new10.6 KB

I just solved as followed

#autocomplete ul {
#autocomplete ul li { margin:0; }
#autocomplete ul li:hover { background:none; }
#autocomplete ul div {
#autocomplete ul div:hover {

The example is trivial, but works

zilla’s picture

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.

adnasa’s picture

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

zilla’s picture

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

Jeff Burnz’s picture

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

Jeff Burnz’s picture

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.

Alexander Matveev’s picture

Status:Closed (fixed)» Needs review

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

Alexander Matveev’s picture

Must be this rule I guess:

#autocomplete li.selected