If you have applied a customized background image or color to your site, the search box content might become not very obvious for the end users: they might find it hard to use this search box, as on the example below:

You can apply a CSS customization to convert the background of the search box into white. By doing this you will improve the user experience, make the search box more visible. 

Please, follow the steps below.

TABLE OF CONTENTS

• Step 1. Open the ShortPoint Theme Builder
• Step 2. Apply the Custom CSS code
• Result

Step 1. Open the ShortPoint Theme Builder

Go to the Site Settings/Site contents > ShortPoint Dashboard > Theme Builder:

Click Customize my site:

Step 2. Apply the Custom CSS code

Go to Utilities > Custom CSS and paste the following CSS code in the Custom CSS text area:

.ms-srch-sb {
    background-color: #fff;
}

Now click Apply (1) and then Publish (2) to save your changes:

Result

Related articles:

• [Classic Experience Only] How to Make Your Site's Sub Menu Wider
• [Classic Experience Only] How to Design a Beautiful Header (Inspired by ShortPoint Demos Website)
• [Classic Experience Only] How to Align Your Site's Menu and Searchbar Vertically
• [Classic Experience Only] How to Create Header Sub-menus with Drop-down Lists