Predictive Search Results Design and Styling

You will need to modify the RenderResults Method within following file: ~\CMS\CMSWebParts\SmartSearch\SearchBox.ascx.cs

In my instance, the portion that you need to modify is line 930 and has the following:

// Render each index category
        foreach (var categories in indexCategories)
        {
            // Display categories
            if (PredictiveSearchDisplayCategories)
            {
                SearchIndexInfo indexInfo = SearchIndexInfoProvider.GetSearchIndexInfo(categories.Key);
                string categoryName = indexInfo == null ? String.Empty : indexInfo.IndexDisplayName;
                repSearchResults.HeaderTemplate = new TextTransformationTemplate("<div class='predictiveSearchCategory nonSelectable'>" + categoryName + "</div>");
            }

            // Fill repeater with results
            repSearchResults.ItemTemplate = CMSDataProperties.LoadTransformation(this, PredictiveSearchResultItemTransformationName);
            repSearchResults.DataSource = categories.Value;
            repSearchResults.DataBind();
            repSearchResults.RenderControl(new HtmlTextWriter(stringWriter));
        }

Here you see the div class being created and this is what you will need to change in order to apply CSS to it. That being said, you are modifying a file that will be over-written when applying any hotfixes and upgrades so our recommendation is to actually clone the web part, rename it and make the changes to the clone so that when you upgrade of apply a hotfix, this web part clone is not affected and so your changes will persist.