Issue


In case you have applied a customized background image or color to your site, the search box content might not be obvious for the end users, and they might find it hard to use this search box, see the following image for example:




Solution


We need to apply a CSS customization to convert the background of the search box into white, improve the user experience, and make it more visible. To fix this please follow the following steps.


Step 1: Open Theme Builder

Go to Site Settings:



Click ShortPoint Dashboard.


In classic experience: 



In modern experience:



Select Theme Builder: 



And click Customize my site:



Step 2: Paste Custom CSS code

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


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




Now click Apply, then Publish.



Result