Customize List Search Results

Overview of the Simple Search Configuration Tool Pane

Each CSS element is listed in the CSS Editor, along with any styles currently defined for it. Add CSS style attributes as desired to customize how elements are displayed in the Web Part. Watch our video to see how you can change the list search results

Below is a list of the default CSS classes defined for the List Search Simple Web Part:

Style	Description
WebPartStyle	defines the styling of the Search Criteria table and Search Results table. Here you can define general format, such as alignment, border, and font styles.
SearchButtonStyle, ResetButtonStyle, PrintButtonStyle, ExportButtonStyle, and BackButtonStyle	define the look and feel of the Search, Reset, Print, Export, and Back buttons. NOTE: If the option Keep Search Criteria with Search Result Page is not checked, the Print Preview and Back buttons are not customizable in the Search Results view.
TextBoxSearchKeyWord	defines the look and feel of the Search in all columns for: text box.
LabelControls	defines the look and feel of the Field Label controls.
TextBoxControls	defines the look and feel of the Field Controls that are text boxes.
TextAreaControls	defines the look and feel of the Field Controls that are text areas.
ListBoxControls	defines the look and feel of the Field Controls that are list boxes.
DropDownListControls	defines the look and feel of the Field Controls that are drop down menus.
k-multiselect	defines the look and feel of the Choice and Lookup Controls that are drop down menus.
CheckBoxControls	defines the look and feel of the Field Controls that are check boxes.
RadioButtonControls	defines the look and feel of the Field Controls that are radio buttons.
ResultTableStyle	defines the general style of the search results table. Settings can include border style, background style and alignment.
ResultTableHeaderStyle	defines the background color for the column headers of the search results table.
ResultNormalItemStyle	defines the background color for the odd number search result rows (rows 1, 3, 5, …).
ResultAlternatingItemStyle	defines the background color for the even number search result rows (rows 2, 4, 6, …).

If unique CSS class names are defined in the layout HTML Editor, they should be added to the CSS class definitions in the CSS Editor window.

For example, if you would like the background color on all odd rows of your search results list to be light yellow, you can change the style as follows:

   ResultNormalItemStyle="yellow"