How to Change the Background Color of the Header Search Field

Introduction

The header search input on BuddyBoss Theme uses the default background color, which may not align with your branding or contrast needs. You can easily override this by adding a custom CSS snippet via the Theme Options.

Custom Workaround

1. Go to BuddyBoss > Theme Options
   
2. Under Custom Codes, Enable CSS
   

Append the following CSS:

input.search-field-top.ui-autocomplete-input {

  background: red;

}

3. Save Changes
   

Note: Any modifications are considered “custom work.” You may review our Support Policy for details.

Troubleshooting and FAQs

Q: The search field background didn’t update—what should I check?
A: Clear your site, CDN, and browser cache. Confirm you’re viewing the header on a device viewport where the header search is active.

Q: How can I revert this change?
A: Remove or comment out the CSS snippet from Custom Codes and save the Theme Options.