Customize Search Criteria Styles

Customize Search Criteria Styles

Overview of List Search Criteria Customization

Modifying the default Styles of the Search Criteria

It is possible to modify the Layout of the search criteria and also the Styles used. You can keep the default layout and just change the styles. Styles are stored in a Cascading Style Sheet (CSS) file. If you are interested in changing the Layout, please see
Customize Search Criteria Layout.

click to modify styles.pngOn the Look and Feel Settings page accessed from the Preferences section of the Web Part Settings, click Modify CSS to access the style sheet for this instance of the web part.

Icon-Tip It’s a good idea to save contents of the default style sheet to your local PC before making any changes. Once you make changes, there isn’t a reset button.

For specific information about the different types of search criteria you may want to style, see the sample search below.
default simple search UI with nums.png

  1. Column Labels
  2. Text Box Controls
  3. Choice & Lookup Columns
  4. Multi-line Text Controls
  5. Date Columns
  6. Person or Group Columns
  7. Number Columns
  8. Currency Columns
  9. Search in all columns for Control
  10. Buttons

    icon-video1 Check this video

To modify the overall style of the default search criteria table (i.e., borders, padding, background color), see Customize the Overall Style for the Search Criteria.

To see some examples, check these:
Example of Customized Styles in Search Criteria

Video:Change the Style of the Search Results in Simple Search Web Part