Product search dropdown background color

[Ben.Fitzpatrick]

Hello.

I'm trying to change the background color of the product search dropdown in the header:

Website address - https://bees.com.au/index.php

Thanks in advance for the help.

Ben

Prestashop 1.7.6.8

[El Patron]

hi, use chrome inspect, there you can learn a bit more about .css, now to locate the .css...and you can even change the .css via chrome inspect  to test.....

start here

https://developers.google.com/web/tools/chrome-devtools/css

 

[ClassyDevs]

 Hello,  Ben.Fitzpatrick

The search result show via jquery UI markup. and they inject run time after search and append at the end of the page, you can change bellow css put the css what EL Patron suggest.

This css is global and it will changed where this widget is called 

.ui-widget-content {

background: red;

}

.ui-menu .ui-menu-item {

background: blue;

}

Hope this solution help you

 

Thank you

[Ben.Fitzpatrick]

Thanks for the reply ClassyDevs. I followed your suggestions and I was able to change the background color of the dropdown list but it didn't work to change the white border/padding of the dropdown list (see image below) or the blue outline in the search area (see image below). I've used Chrome's Inspect tool but I haven't been able to find the right CSS to modify this nor has any of my inputted CSS worked. Suggestions?

[El Patron]

On 12/10/2020 at 11:11 PM, Ben.Fitzpatrick said:

Thanks for the reply ClassyDevs. I followed your suggestions and I was able to change the background color of the dropdown list but it didn't work to change the white border/padding of the dropdown list (see image below) or the blue outline in the search area (see image below). I've used Chrome's Inspect tool but I haven't been able to find the right CSS to modify this nor has any of my inputted CSS worked. Suggestions?

 

and if you used chrome dev tools you could have found it on your own...it's very powerful....