Let me tell you how to find this. It will help you for other things.
Do you use Chrome or Firefox?
I use Chrome, but the steps are similar for Firefox.
Right click the top left hand corner of the element you want to change (you do this so you're more likely to pick up the parent element, rather than clicking near input checkbox and being taken to the wrong bit) and then click Inspect Element.
You see how <div class="controlsWrapper"> is highlighted? That's the element and class that we need to style... To double check this if you hover over that in the code, you will see it highlighted on your screen:
Definitely looks like the right one.
Also, you can "practice" how you want it to look because you can alter the style right from within your browser (for testing purposes).
So, right there I can see the current CSS that applies (e.g. .formPopup .controlsWrapper) and all its other properties. I can also click the little square next to the background colour and change it to something I like:
And preview the results live in the browser:
Now, for some reason if I wanted that bizarre colour for my search background all I need to do is go to EXTRA.css and add: